Question

我似乎坚持这项无害的任务。找到TEXT_NODE后，我试图插入动态形成的图像标记。

例如，如果TEXT_NODE是段落<p> This is a TEXT_NODE </p>中的以下内容，我希望它为<p> <img src="...">This is a TEXT_NODE</p>。

这是我的代码段：

if (nodex.nodeType == 3) { // Node.TEXT_NODE
   [...]
   var DOM_img    = content.document.createElement("img");
   DOM_img.src    = "http://www.somesite.com/pix/" + bPix + ".gif";
   DOM_img.height = '27';
   DOM_img.width  = '19';
   DOM_img.hspace = '1';
   DOM_img.vspace = '5';
   DOM_img.alt    = bAlt;

   // This is where I want to insert the HTML IMG Tag
}

我尝试了以下所有内容（以及更多内容）关于SO的各种类似问题的答案 - 似乎没有任何效果。

   //nodex.insertBefore(DOM_img, nodex);
   //nodex.parentNode.appendChild(DOM_img);
   //nodex.parentNode.innerHTML = html_for_DOM_img;
   //nodex.innerHTML = html_for_DOM_img;

如果我content.document.body.appendChild(DOM_img);有效，但图像预计放在别处（我不想要）。

Answer 1

这是你没有尝试过的......（fiddle）

nodex.parentNode.insertBefore(DOM_img, nodex);

Answer 2

你可以试试这个

var oPara = document.getElementById( 'para' ),
    oImg = document.createElement( 'img' ),
    oTxt = document.createTextNode( 'Hello World!' );

oImg.setAttribute( 'src', 'sample.jpg' );
oPara.appendChild( oImg );
oPara.appendChild( oTxt );

这需要使用标识p定义的HTML元素div或para。

如何使用HTML DOM在TEXT_NODE之前插入图像

2 个答案: