javascript - DOm 要素のキャッチ

Question

こんにちはみんな、pタグの横にあるimgタブをキャッチするのに助けが必要です

これは私のHTMLです

<p>
  <img style="max-width: 100%; margin-left: auto; margin-right: 
     auto; display: block;" 
     src="../content_platform_node/content_primitive/51e4c3e29306e2581000000a/blob"
     alt="" data-lscp-resource-mimetype="image/jpeg" 
     data-lscp-resource-id="51e4c3e29306e2581000000a" />
 </p>

必要なのは、 img タブを p tag の代わりにタグでラップすることです。これは、ユーザー入力コンテンツを事前に生成したものではないことに注意してください。したがって、jquery または javascript でこれを行う必要があります。

助けが必要

Answer 1

次のようなものを試すことができます

var parent = $('img').parent();
parent.wrap('<div />').contents().unwrap()

divは他のタグにすることができます

Answer 2

var image = $('img[data-lscp-resource-id="51e4c3e29306e2581000000a"]');
image.parent('p').replaceWith($('<a></a>').html(image));

フィドル

編集：生のjs：

var image = document.getElementsByTagName('img')[0];
var oldParent = image.parentNode;

var newParent = document.createElement('a');
newParent.appendChild(image);
oldParent.parentNode.appendChild(newParent);
oldParent.parentNode.removeChild(oldParent);

フィドル