原生 js 如何追加 html

Question

原生 js 如何追加 html?(有没有像 jquery append() 那样可以直接插入 <ul><li>item1</li><ul> 这种的方式呢?)

Answer 1

element.insertAdjacentHTML(position, text);

position 是相对于 element 元素的位置，并且只能是以下的字符串之一：

1. beforebegin：在 element 元素的前面。

2. afterbegin：在 element 元素的第一个子节点前面。

3. beforeend：在 element 元素的最后一个子节点后面。

4. afterend：在 element 元素的后面。

text 是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>

参考Element.insertAdjacentHTML()

Answer 2

<p id="d">原生 js 如何追加</p>

document.getElementById('d').innerHTML+="这样子";

var dom = document.createElement('span');
dom.innerHTML="这样子";
document.getElementById('d').appendChild(dom);

Answer 3

给你来个简单方式

document.getElementById('a').innerHTML +='<ul><li>item1</li><ul>';

Answer 4

直接innerHTML后面添加啊

Answer 5

var newele = document.createElement("img");//假定要添加一个img元素
ele.document.appendChild(newele);//这样就给ele元素追加了一个img

Answer 6

你说的是append DOM？

Answer 7

var div = document.body.createElement('div')
div.innerHTML = 'your html code'
document.body.appendChild(div)
div.outerHTML = div.innerHTML

Answer 8

W3School JavaScript HTML DOM 元素（节点）

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

Answer 9

没有，原生的必须要先是一个dom元素，再添加