使用另一个元素的内容创建和附加一个 DOM 元素

Posted 2023-02-19

【中文标题】使用另一个元素的内容创建和附加一个 DOM 元素

【英文标题】：Creating and appending a DOM element with the content of another element

【发布时间】：2017-10-04 16:02:24

【问题描述】：

我的代码如下

  ;(function(window)
    var $description_window= document.querySelector('.mg_post_description'),
        $headings= document.querySelectorAll('.mg_blog_main_content h3'),
        $paragraph = document.createElement('p');
        for (var j = 0; j < $headings.length; j++) 
            var $headingChildren=$headings[j].cloneNode(true).childNodes;
            $paragraph.appendChild($headingChildren[j]);
       
       $description_window.append($paragraph);
)(window);

这里我想做的是；复制内容框的 h3 标签。然后创建一个paragraph 元素。然后将p 标记附加到收集的h3 标记中。但是，运行此程序时出现以下错误。

在Node 上执行appendChild 失败：参数1 不是Node 类型。

  ;(function(window)
    var $description_window= document.querySelector('.post_description'),
    
   $headings= document.querySelectorAll('.post_description h3'),
   $paragraph = document.createElement('p');
   
   for (var j = 0; j < $headings.length; j++) 
   
       var $headingChildren=$headings[j].cloneNode(true).childNodes;
            $paragraph.appendChild($headingChildren[j]);
       
       
       $description_window.append($paragraph);
       
)(window);

.post_description

  width:200px;
  height:200px;
  background-color:#555;
  position:absolute;
  top:10%;
  right:8%;
  


.post_description a 
  
  color:white;


.main_body

  padding-top:40%;

<div class="main_body">
    <h3>Testing one</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  <h3>Testing two</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


  <h3>Testing three</h3>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


  <h3>Testing four</h3>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

<div class="post_description"></div>

有人能解释一下为什么会发生这种情况以及如何解决这个问题

谢谢

【问题讨论】：

你能分享元素'内容框'html吗？

内容框的元素是简单的h3标题和p块文本。我正在尝试提取 h3 元素并将它们显示为另一个 div 中的段落元素。

你能创建一个jsfiddle吗

我所做的只是删除 childNodes 和所有的绒毛。

【参考方案1】：

var d = document.querySelector('.desc'),
    h = document.querySelectorAll('.main h3');

h.forEach(function(n) 
  var p = document.createElement('p');
  p.innerHTML = n.cloneNode(true).innerHTML || '';
  d.append(p);
);

.desc 
  color: red;

<div class="main">
  <h3>First</h3>
  <h3>Second</h3>
  <h3>Third</h3>
</div>

<div class="desc">
</div>

【讨论】：

这个复制了新div中的h3元素，而不是p元素。

能否在 p 标签中生成重复的元素？谢谢

类似的东西？

【参考方案2】：

要达到预期效果，请使用以下选项

function addElem() 
    var mElem = document.querySelector('.mg_post_description')
    var hElems = document.getElementsByTagName('H3');
    var node = document.createElement("P");
    for (var i = 0; i < hElems.length; i++) 

        var textnode = document.createTextNode(hElems[i].innerHTML);
        var cloneElem = node.cloneNode(true);
        cloneElem.appendChild(textnode);
        mElem.appendChild(cloneElem);
    
;

addElem()

Codepen-https://codepen.io/nagasai/pen/YVEzdJ

【讨论】：

它确实有效。但是，我可以问我是否可以通过修改我在此处发布的原始代码来做同样的事情。感谢并期待

更新了 codepen-codepen.io/nagasai/pen/ZKaEZe，希望这对你有用:)

感谢 Sai 的帮助

没问题..很高兴我的回答对您有所帮助:)