查找文本（子文本节点）并将其包装在一个段落中

问题描述 投票：0回答：2

我需要一个函数，该函数可在某些（对于本示例而言为div）元素内查找文本（子文本节点），并将文本包装在段落中。

<body>
 <div>Text1
   <div>Text2</div>
 </div>
 <div>Text3</div>
 <p>Text4</p>
</body>

const elements = fn(document);
console.log(document.body.innerHTML);

<body>
 <div><p>Text1</p>
  <div><p>Text2</p></div>
 </div>
 <div><p>Text3</p></div>
 <p>Text4</p>
</body>

尝试过这样做，但是却无法正常工作

const fn = (document) => {
  let elements = document.getElementsByTagName('div');
  elements = Array.prototype.slice.call(elements);
  elements.forEach(el => (el.innerHTML) ? el.innerHTML = `<p>${el.innerHTML}</p>` : '');
}

任何人都可以帮助修复它吗？

另一个例子：

文档：

Text1
<div>
 <div>Text2</div>
 <p>Text3</p>
</div>
<div>Text4</div>

预期：

Text1
<div>
 <div><p>Text2</p></div>
 <p>Text3</p>
</div>
<div><p>Text4</p></div>

通过我的功能收到：

Text1
<div><p></p>
<div>Text2</div>
<p>Text3</p>
<p></p>
</div>
<div><p>Text4</p></div>
javascript html dom
2个回答
1
投票

通过考虑childElementCount的div，我们可以获得您想要的结果。如下所示重写您的函数。

const fn = (document) => {
    let elements = document.getElementsByTagName('div');
    elements = Array.prototype.slice.call(elements);
    elements.forEach(el => {
      if (el.innerHTML && el.childElementCount === 0) {
        el.innerHTML = `<p>${el.innerHTML}</p>`;
        }
    });
  }
0
投票

var elements = document.getElementsByTagName('div');
  for(var i=0;i<elements.length;i++){
    if(elements[i]===0){
      console.log(elements[i].textContent);
     
                       }
  else{
    var y=elements[i].innerHTML
console.log(y)
      }
  }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>testing result</title>
</head>
<body>
  
<div>Text1</div>
<div>
<div>Text2</div>
<p>Text3</p>
</div>
<div>Text4</div>
</body>


</body>
</html>

我尝试了这个，但是我无法在控制台<div>text4</div>和<div>text2</div>中获得像输出这样的最后两个div（4和2），我希望这对我有所帮助，但我不知道如何打印最后两个div innerHTML

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.