Javascript 使用js更改每个子节点的html（添加输入）

我正在尝试使用js将特定div中的每个子节点更改为input，如下所示：

<div class="change">
    sample text
    <h3>another one</h3>
    text
    <p>text</p>
</div>

->

<div class="change">
   <input type=text value='sample text'/> 
   <h3><input type=text value='another one'/></h3>
   <input type=text value='text'/>
   <p><input type=text value='text'/></p>
</div>

示例文本
另一个
文本
正文

->

可悲的是：

• document.getElementsByClassName（“更改”）[x].children[y]
  仅返回h3和p。它不能在div中返回明文

• document.getElementsByClassName（“change”）[x].childNodes[o]
  这是唯一的回报。尽管如此，如果我想将所有内容加载到某个var render中，然后执行类似.innerHTML=render的操作，它会为每个节点返回类似于[object HTMLHeadingElement]

---

所以我认为要做我想做的事情，我需要为每个节点使用HTML，但我不知道如何做到这一点。

您只需获得实际的innerHTML值，然后在新行上拆分以获得每个值：

var html = document.getElementsByClassName("change")[0].innerHTML;
var lines = html.split('\n');
var replace = '';

for(var i=0; i < lines.length; i++){
  var str = lines[i].trim();
  if(str == '') continue;
  replace += '<input type=text value="' +str+ '" />';
}

document.getElementsByClassName("change")[0].innerHTML = replace;

var html=document.getElementsByClassName（“更改”）[0].innerHTML；
var lines=html.split（'\n'）；
var替换=“”；
对于（变量i=0；i

---

另外，我在其中添加了

trim

，以从空项目中删除任何多余的行。

您只需获取实际的innerHTML值，然后在新行上拆分以获取每个值：

var html = document.getElementsByClassName("change")[0].innerHTML;
var lines = html.split('\n');
var replace = '';

for(var i=0; i < lines.length; i++){
  var str = lines[i].trim();
  if(str == '') continue;
  replace += '<input type=text value="' +str+ '" />';
}

document.getElementsByClassName("change")[0].innerHTML = replace;

var html=document.getElementsByClassName（“更改”）[0].innerHTML；
var lines=html.split（'\n'）；
var替换=“”；
对于（变量i=0；i

---

此外，我在其中添加了

trim

，以删除空项目中的任何多余行。

使用ID而不是类，我已更新了下面的代码

<div id="change">
    sample text
    <h3>another one</h3>
    text
    <p>text</p>
</div>

->

<div class="change">
   <input type=text value='sample text'/> 
   <input type=text value='<h3>another one</h3>'/>
   <input type=text value='text'/>
   <input type=text value='<p>text</p>'/>
</div>

-> 

<script type="text/javascript">
    var el = document.getElementById("change");
    var child = el.firstChild;

    while (child) {
      if(child.nodeType == 3)
          console.log(child.nodeType  + child.nodeValue); // Here you can pick every Text element to do anything
      else
            console.log(child.nodeType  + child.innerHTML); // Here you can pick every child and do anything

        child = child.nextSibling;
    }
</script>

示例文本
另一个
文本
正文

->
-> 
var el=document.getElementById（“变更”）；
var child=el.firstChild；
while（儿童）{
if（child.nodeType==3）
console.log（child.nodeType+child.nodeValue）；//在这里，您可以选择每个文本元素来执行任何操作
其他的
console.log（child.nodeType+child.innerHTML）；//在这里，您可以选择每个孩子并执行任何操作
child=child.nextSibling；
}

使用ID而不是类，我已经更新了下面的代码

<div id="change">
    sample text
    <h3>another one</h3>
    text
    <p>text</p>
</div>

->

<div class="change">
   <input type=text value='sample text'/> 
   <input type=text value='<h3>another one</h3>'/>
   <input type=text value='text'/>
   <input type=text value='<p>text</p>'/>
</div>

-> 

<script type="text/javascript">
    var el = document.getElementById("change");
    var child = el.firstChild;

    while (child) {
      if(child.nodeType == 3)
          console.log(child.nodeType  + child.nodeValue); // Here you can pick every Text element to do anything
      else
            console.log(child.nodeType  + child.innerHTML); // Here you can pick every child and do anything

        child = child.nextSibling;
    }
</script>

示例文本
另一个
文本
正文

->
-> 
var el=document.getElementById（“变更”）；
var child=el.firstChild；
while（儿童）{
if（child.nodeType==3）
console.log（child.nodeType+child.nodeValue）；//在这里，您可以选择每个文本元素来执行任何操作
其他的
console.log（child.nodeType+child.innerHTML）；//在这里，您可以选择每个孩子并执行任何操作
child=child.nextSibling；
}

谢谢！但是-如果元素占用多行怎么办？像一段。还有-这是我的错（我在我的例子中弄错了），我希望有像输入之外的标签。谢谢！但是-如果元素占用多行怎么办？像一段。另外，我的缺点是（在我的例子中我错了），我希望在输入之外有这样的标记。但是我如何检索孩子的html呢？child只返回

[object HTMLParagraphElement]

或类似的值好的，我已经编辑了上面的代码，分别处理这两类子节点。看看这是否解决了您的问题。但我如何检索孩子的html？child只返回

[object HTMLParagraphElement]

或类似的值好的，我已经编辑了上面的代码，分别处理这两类子节点。看看这是否能解决你的问题。检查一下这个，它可能会解决你的问题help@RomanGranovsky我知道，使用child.nodeValue可以获得文本，但是nodeType=1的html呢？使用递归。查找元素内部的文本节点。

函数findTextNodes（el）{var textNodes=[]；for（var i=0；i

很抱歉格式不好。在移动应用程序的注释中格式化代码很痛苦：（检查这个，可能会help@RomanGranovsky我知道，使用child.nodeValue可以获取文本，但是nodeType=1的html呢？使用递归。在元素中查找文本节点。

函数findTextNodes（el）{var textNodes=[]；for（var I=0；I

很抱歉格式错误。使用移动应用程序格式化注释中的代码很痛苦。：(