原生 js 如何追加 html

无名小子
  • 628

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

回复
阅读 32.8k
9 个回答
✓ 已被采纳

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()

<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>';

直接innerHTML后面添加啊

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

你说的是append DOM?

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

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>

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

宣传栏