使用 JavaScript 添加 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3425142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding HTML elements with JavaScript
提问by John Stimac
So, if I have HTML like this:
所以，如果我有这样的 HTML：
<div id='div'>
<a>Link</a>
<span>text</span>
</div>
How can I use JavaScript to add an HTML element where that blank line is?
如何使用 JavaScript 在空白行所在的位置添加 HTML 元素？
采纳答案by simplyharsh
As you didn't mention any use of javascript libraries (like jquery, dojo), here's something Pure javascript.
由于您没有提到任何 javascript 库（如 jquery、dojo）的使用，这里有一些纯 javascript。
var txt = document.createTextNode(" This text was added to the DIV.");
var parent = document.getElementById('div');
parent.insertBefore(txt, parent.lastChild);
or
或者
var link = document.createElement('a');
link.setAttribute('href', 'mypage.htm');
var parent = document.getElementById('div');
parent.insertAfter(link, parent.firstChild);
回答by Saqib R.
node = document.getElementById('YourID');
node.insertAdjacentHTML('afterend', '<div>Sample Div</div>');
Available Options
可用选项
beforebegin, afterbegin, beforeend, afterend
前、后、后、后
回答by Daniel Vandersluis
Instead of dealing with the <div>'s children, like other answers, if you know you always want to insert after the <a>element, give it an ID, and then you can insert relative to its siblings:
而不是<div>像其他答案一样处理的子<a>元素，如果你知道你总是想在元素之后插入，给它一个 ID，然后你可以相对于它的兄弟元素插入：
<div id="div">
<a id="div_link">Link</a>
<span>text</span>
</div>
And then insert your new element directly after that element:
然后在该元素之后直接插入新元素：
var el = document.createElement(element_type); // where element_type is the tag name you want to insert
// ... set element properties as necessary
var div = document.getElementById('div');
var div_link = document.getElementById('div_link');
var next_sib = div_link.nextSibling;
if (next_sib)
{
// if the div_link has another element following it within the link, insert
// before that following element
div.insertBefore(el, next_sib);
}
else
{
// otherwise, the link is the last element in your div,
// so just append to the end of the div
div.appendChild(el);
}
This will allow you to always guarantee your new element follows the link.
这将允许您始终保证您的新元素遵循链接。
回答by jigfox
If you want to use something like jQuery you can do something like this:
如果你想使用像 jQuery 这样的东西，你可以这样做：
$('#div a').after("Your html element");
回答by ford
jQuery has a nice, built in function for this: after(), at http://api.jquery.com/after/
jQuery 有一个很好的内置函数：after()，位于http://api.jquery.com/after/
In your case, you will probably want a selector like this:
在您的情况下，您可能需要这样的选择器：
$('#div a').after('<p>html element to add</p>');
The code examples from the link given above also show how to load jQuery if that is new to you.
上面给出的链接中的代码示例还展示了如何加载 jQuery（如果您不熟悉）。
回答by tcooc
Assuming that you are only adding one element:
假设您只添加一个元素：
document.getElementById("div").insertBefore({Element}, document.getElementById("div").children[2]);
