insertAdjacentHTML
函数需要两个参数:
- 位置 (
"beforebegin"
,"afterbegin"
,"beforeend"
,"afterend"
) - 待插入的 HTML 代码(将被转换为 DOM 元素)
我能否将一个 DOM 元素作为第二个参数传递给它?
insertAdjacentHTML
函数需要两个参数:
"beforebegin"
, "afterbegin"
, "beforeend"
, "afterend"
)我能否将一个 DOM 元素作为第二个参数传递给它?
虽然你无法直接传递DOM元素,但可以通过将element.outerHTML
传递给insertAdjacentHTML
的第二个参数来传递HTML字符串表示。
示例:
const parent = document.querySelector('.parent');
const child = document.createElement('p');
child.innerHTML = 'Awesome!';
parent.insertAdjacentHTML('beforeend', child.outerHTML);
// <div class="parent">
// <p>Awesome!</p>
// </div>
insertAdjacentHTML
文档明确指出,第一个参数必须是字符串类型。
第二个参数不是很清楚应该传什么,但测试表明在第二个参数上会内部执行
element.insertAdjacentHTML(position, text);
position
是相对于元素的位置,必须是以下字符串之一:
"beforebegin", "afterbegin", "beforeend", "afterend"
toString()
方法,因此答案是:
是的,在大多数情况下可以将DOM元素作为第二个参数传递,但实际上是不行的,它不会被追加到页面中,而只会得到字符串。[object HTMLDivElement]
由于DOM元素被转换为字符串,这意味着函数始终期望第二个参数是一个有效的HTML字符串,而不是DOM元素。
这里有一个快速测试
var d1 = document.getElementById('one');
var d3 = document.createElement('div');
d3.innerHTML = 'three';
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
d1.insertAdjacentHTML('afterend', d3);
<div id="one">one</div>
appendChild
、insertBefore
等。使用哪种方法取决于要插入元素的位置等因素,但可以在与insertAdjacentHTML
中提供的四个选项相同的位置进行插入,通常不难完成。Element.insertAdjacentElement()
方法,它的用法类似于insertAdjacentHTML
,但接受一个DOM节点而不是HTML字符串。.insertAdjacentHTML()
只接受将被解析为HTML并插入(类似于innerHTML
)的字符串。
要插入DOM元素,您可以使用.insertAdjacentElement()
MDN:https://developer.mozilla.org//docs/Web/API/Element/insertAdjacentElement