javascript - 难题，关于在p标签下新增元素

Question

<p>
    <img/>    
    <img/>    
    <img/>
</p>

<p>
    <img/>    
    <img/>    
    <img/>
</p>

• 我现在能取到第一个p节点的第三个img的引用，怎么在他后面新增第四个<img/>。

• 我用cloneNode可以生成一个和第三个img一样的元素。但不懂怎么添加在第三个img后面。我试过parentNode，但返回的是body，不是p标签。

• 补充下，我是遍历dom，然后进行信息更新或者添加节点，我并不知道我当前处于哪个p节点下面，自然也不知道当前img上级p标签的class和id，根据id和class应该都行不通。

Answer 1

https://developer.mozilla.org...

var imgs = document.getElementsByTagName('img');
var img = document.createElement('img');
img.src = 'https://www.baidu.com/img/bd_logo1.png';
imgs[2].after(img);

https://jsfiddle.net/ycloud/v...

Answer 2

使用jquery 的 .append():

(function() {
    var x = 你取到的第三个img;
    $(x).parent('p').append('<img />');
});

Answer 3

var img = new Image()
document.getElementById('p-id').appendChild(img)

不过并不知道上面的代码有没有兼容性问题

Answer 4

parentNode返回body？你是用的clone出来的Node么？用本来的那个img元素的话不应该啊。。。