如何用js在特定位置动态添加html？除了innerHTML。。

js在特定位置动态添加html可以利用HTML DOM appendChild() 方法。

例子：

var div1 = document.createElement("div")

div1.id = "div1"

var div2 = document.createElement("div")

div2.id ="div2"

document.body.appendChild(div1)

div1.appendChild(div2)

appendChild()定义和用法：

appendChild() 方法向节点添加最后一个子节点。

提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。

您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

从一个列表向另一个列表中移动列表项：

var node=document.getElementById("myList2").lastChild

document.getElementById("myList1").appendChild(node)

$(document).ready(function(){

$("#btn2").click(function(){

$("<input type='text' name='ddd' id='ddd' value='Hello, Nowamagic' ><br>").appendTo("#ccc")

})

$("#btn1").click(function(){

$("#nowamagic").append("<input type='text' name='ddd' id='ddd' value='Hello, Nowamagic' ><br>")

})

})

这里我们必须知道一点，就是 append 和 appendTo 的区别：append 单纯的内容，appendTo 要把内容传给某个元素。

这个函数的用法有很多，比如你可以按需要追加form，在区域内追加图片等等都是可以的。

比如下边这个例子，追加的元素就是直接加入的，看作一个字符串。

$('body').append('<div class="clickme">Another target</div>')

你可以声明一个字符，然后取得你需要追加的元素就好。

---