使用JQuery创建HTML父标记

Creating HTML parent tag using JQuery

本文关键字：HTML JQuery 创建 使用      更新时间：2023-09-26

我正在尝试将父<div>标记添加到我的<img>标记中。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"> 
        <title>submit demo</title> 
        <script src="D:'jquery'jquery.js"></script>
    </head>
    <body> 
        <form> 
            <div>   
                <textarea rows="50" cols="200"><p>This is a paragraph Tag</p>
                <p>
                    <img src='C:'Users'Public'Pictures'Sample Pictures'Desert.jpg'></img>this is a First paragraph tag
                </p>
                <p>
                    this is a second paragraph tag
                </p>
                <input type="submit"> 
            </div>
        </form>
        <span></span>
        <script>
            $("form").submit(function(event) {  
                event.preventDefault();
                var textarea = $("textarea").val();
                var Div = document.createElement("div");
                $(Div).html(textarea);
                var divtext = $(Div).html();
                $(Div).find("p:has(img)").each(function(i){
                    var images = $(this).html();
                    var d=document.createElement("div");
                    $(this).html("");
                    $(d).appendTo(this);
                    $(d).append(images);
                });
                $("textarea").val($(Div).html());
            });
        </script>
    </body>
</html>

这里我需要像一样的输出

<P>
    <DIV>
        <IMG src="C:'Users'Public'Pictures'Sample Pictures'Desert.jpg"></IMG>
    </DIV>
    this is a second paragraph tag
</P>

只有<img>标签应该在我的<div>标签中，但我得到了像一样的输出

<P>
    <DIV>
        <IMG src="C:'Users'Public'Pictures'Sample Pictures'Desert.jpg"></IMG>
        this is a second paragraph tag
    </DIV>
</P>

请帮帮我。提前谢谢。

首先，img标记的HTML无效。试试这个：

<img src='C:'Users'Public'Pictures'Sample Pictures'Desert.jpg' />

其次，您需要在它们上使用wrap('<div />');。

$('div img').wrap('<div />');

使用.wrap()，我们可以在内部<div> elements周围插入一个HTML结构。新的<div> element是动态创建的，并添加到DOM中。结果是一个新的<div>包裹在每个matched element 上

$( "img" ).wrap( "<div class='myClass'></div>" );

输出

<div class='myClass'><img src='C:'Users'Public'Pictures'Sample Pictures'Desert.jpg'></img></div>

您的<textarea>未关闭。

解决方案是将img标签包装在Div中。这很简单，只需一行JQuery

$('img').wrap('<div />');

或

$('img').wrap('<div></div>');

如果需要，可以向div添加属性。

相关文章：