使用缩进/间距将元素附加到 DOM [英] Appending elements to DOM with indentation/spacing
问题描述
这是一个例子.检查控制台以获取结果.前两个 div
(未附加;在控制台中 上方)具有适当的间距和缩进.然而,后两个
div
没有显示与原始相同的格式或空格,即使它们完全相同,但附加了.
例如输入
var newElem = document.createElement('div');document.body.appendChild(newElem);var another = document.createElement('div');newElem.appendChild(another);console.log(document.body.innerHTML);
给出输出
当我想要它看起来像
<div></div>
有没有办法在附加元素之间生成适当的空白,并在使用 innerHTML
(或可能的类似方法)获取它时保留该间距?我需要能够直观地显示我正在处理的页面的层次结构和结构.
我尝试将其附加到实际 HTML 中的元素中,但它具有相同的行为
我可以按照 lincolnk 的建议使用文本节点和换行符来执行此操作,但它需要影响动态结果,这意味着我不能使用相同的 .createTextNode(' </br>')
因为不同的元素在层次结构的不同层次
请不要使用jQuery
我认为您要求能够将元素附加到 DOM,这样从 document.body.innerHTML
将使用缩进等进行格式化,就像您将其输入到文本编辑器中一样,对吗?
如果是这样,这样的事情可能会奏效:
function indentedAppend(parent,child) {var indent = "",elem = 父母;while (elem && elem !== document.body) {缩进 += " ";elem = elem.parentNode;}if (parent.hasChildNodes() && parent.lastChild.nodeType === 3 &&/^\s*[\r\n]\s*$/.test(parent.lastChild.textContent)){parent.insertBefore(document.createTextNode("\n" + indent), parent.lastChild);parent.insertBefore(child, parent.lastChild);} 别的 {parent.appendChild(document.createTextNode("\n" + indent));parent.appendChild(child);parent.appendChild(document.createTextNode("\n" + indent.slice(0,-2)));}}
演示:http://jsbin.com/ilAsAki/28/edit
我没有考虑太多,所以你可能需要尝试一下,但它至少是一个起点.
另外,我假设缩进 2 个空格,因为这就是您似乎正在使用的.
哦,在将它与 <pre>
标签或任何设置 CSS 以保持 HTML 空白的地方一起使用时,显然需要小心.
Here is an example. Check the console for the result. The first two div
s (not appended; above the <script>
in the console) have the proper spacing and indention. However, the second two div
s do not show the same formatting or white space as the original even though they are completely the same, but appended.
For example the input
var newElem = document.createElement('div');
document.body.appendChild(newElem);
var another = document.createElement('div');
newElem.appendChild(another);
console.log(document.body.innerHTML);
Gives the output
<div><div></div></div>
When I want it to look like
<div>
<div></div>
</div>
Is there any way to generate the proper white space between appended elements and retain that spacing when obtaining it using innerHTML
(or a possible similar means)? I need to be able to visually display the hierarchy and structure of the page I'm working on.
I have tried appending it within an element that is in the actual HTML but it has the same behavior
I'd be okay with doing it using text nodes and line breaks as lincolnk suggested, but it needs to affect dynamic results, meaning I cannot use the same .createTextNode(' </br>')
because different elements are in different levels of the hierarchy
No jQuery please
I think you're asking to be able to append elements to the DOM, such that the string returned from document.body.innerHTML
will be formatted with indentation etc. as if you'd typed it into a text editor, right?
If so, something like this might work:
function indentedAppend(parent,child) {
var indent = "",
elem = parent;
while (elem && elem !== document.body) {
indent += " ";
elem = elem.parentNode;
}
if (parent.hasChildNodes() && parent.lastChild.nodeType === 3 && /^\s*[\r\n]\s*$/.test(parent.lastChild.textContent)) {
parent.insertBefore(document.createTextNode("\n" + indent), parent.lastChild);
parent.insertBefore(child, parent.lastChild);
} else {
parent.appendChild(document.createTextNode("\n" + indent));
parent.appendChild(child);
parent.appendChild(document.createTextNode("\n" + indent.slice(0,-2)));
}
}
demo: http://jsbin.com/ilAsAki/28/edit
I've not put too much thought into it, so you might need to play with it, but it's a starting point at least.
Also, i've assumed an indentation of 2 spaces as that's what you seemed to be using.
Oh, and you'll obviously need to be careful when using this with a <pre>
tag or anywhere the CSS is set to maintain the whitespace of the HTML.
这篇关于使用缩进/间距将元素附加到 DOM的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!