原生 js 如何追加 html?(有没有像 jquery append() 那样可以直接插入 <ul><li>item1</li><ul> 这种的方式呢?)
append()
<ul><li>item1</li><ul>
业精于勤,荒于嬉;行成于思,毁于随。
element.insertAdjacentHTML(position, text);
position 是相对于 element 元素的位置,并且只能是以下的字符串之一:
position
element
beforebegin:在 element 元素的前面。
beforebegin
afterbegin:在 element 元素的第一个子节点前面。
afterbegin
beforeend:在 element 元素的最后一个子节点后面。
beforeend
afterend:在 element 元素的后面。
afterend
text 是字符串,会被解析成 HTML 或 XML,并插入到 DOM 树中。
text
// <p id="one">one</p> var d1 = document.getElementById('one'); d1.insertAdjacentHTML('afterend', '<p id="two">two</p>'); // 此时,新结构变成: // <p id="one">one</p><p id="two">two</p>
参考Element.insertAdjacentHTML()
<p id="d">原生 js 如何追加</p> document.getElementById('d').innerHTML+="这样子"; var dom = document.createElement('span'); dom.innerHTML="这样子"; document.getElementById('d').appendChild(dom);
给你来个简单方式
document.getElementById('a').innerHTML +='<ul><li>item1</li><ul>';
var newele = document.createElement("img");//假定要添加一个img元素 ele.document.appendChild(newele);//这样就给ele元素追加了一个img
你说的是append DOM?
var p = document.body.createElement('p') p.innerHTML = 'your html code' document.body.appendChild(p) p.outerHTML = p.innerHTML
W3School JavaScript HTML DOM 元素(节点)
<p id="p1"> <p id="p1">这是一个段落</p> <p id="p2">这是另一个段落</p> </p> <script> var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); var element=document.getElementById("p1"); element.appendChild(para); </script>
没有,原生的必须要先是一个dom元素,再添加
直接innerHTML后面添加啊
position
是相对于element
元素的位置,并且只能是以下的字符串之一:beforebegin
:在 element 元素的前面。afterbegin
:在 element 元素的第一个子节点前面。beforeend
:在 element 元素的最后一个子节点后面。afterend
:在 element 元素的后面。text
是字符串,会被解析成 HTML 或 XML,并插入到 DOM 树中。参考Element.insertAdjacentHTML()
给你来个简单方式
你说的是append DOM?
W3School JavaScript HTML DOM 元素(节点)
没有,原生的必须要先是一个dom元素,再添加
直接innerHTML后面添加啊