javascript 怎么动态创建元素？

比如我像用js动态的创建一个div或者图片等等的元素。。

意思是不是一开始就在html那里写好的。。而是在js里动态创建的。、

麻烦写个小例子。。3Q！

推荐答案 2014-03-31

// 动态创建元素
// 1）使用 createElement 和 appendChild
//    首先，你的 html 中的 body 可以加一个 id="body" 方便动态创建哈
<script type="text/javascript">
    window.onload = function(){
        // 定义一个 div
        var div = document.createElement("div");
        // 他的 id="newid"
        div.id = "newid";
        // 他的 style 的颜色为 red
        div.style.color = "red";
        // 他的内容为 test
        div.innerHTML = "test";
        // 然后加到 id="body" 的控件中去
        document.getElementById("body").appendChild(div);
    }
</script>

// 2）你可以使用 document.write();
<body>
    <script type="text/javascript">
        // 这里就等于在 body 中，添加了一个 div 啦
        document.write("<div id='newid' style='color:red;'>test</div>");
    </script>
</body>
// 以上代码执行后，实际页面代码如下：
<body>
<div id='newid' style='color:red'>test</div>
</body>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/UUxD999UxU9Up9Di9Uv.html

其他回答

第1个回答推荐于2018-03-29

1、通过createElement的方式进行元素创建

var a = document.createElement("a"); //创建一个超链接a
a.href = url; //赋值超链接网址
a.innerHTML = text; //超链接显示的文字内容

2、创建后通过appencChild方式添加到网页中。

document.appendChild(a);//超链接元素节点添加到网页中

本回答被网友采纳

第2个回答 2014-03-31

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var count = 0 ;
$("#create").click(function(){//点击触发事件
$(document.body).append("<div stle='border:1px solid red;width:200px;height:200px;'>第"+count+++"个DIV</div>");//对dom增加一个div
});

});
</script>

</head>
<button id='create'>创建新的DIV</button>
<body>
</body>

</html>

第3个回答推荐于2016-01-22

var div = document.createElement("div"); // 创建div对象
var img = document.createElement("img"); // 创建img对象

然后用

对象.appendChild(div);
就可以把新建的对象加入到网页中。

可以用document.getElementById("对象id"); // 根据对象id找到某个对象本回答被提问者采纳

相似回答

大家正在搜