使用JQuery创建HTML父标记
[英]Creating HTML parent tag using JQuery
问题描述
I'm trying to add a parent <div> tag to my <img> tags. 
我正在尝试将父<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>
Here I need output like 在这里，我需要输出
<P>
<DIV>
<IMG src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"></IMG>
</DIV>
this is a second paragraph tag
</P>
Only the <img> tag should be inside my <div> tag but i'm getting output like 只有<img>标签应该在我的<div>标签内，但我得到的输出就像
<P>
<DIV>
<IMG src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"></IMG>
this is a second paragraph tag
</DIV>
</P>
Please Help me. 请帮我。 Thanks in Advance. 提前致谢。
3 个解决方案
解决方案1
2 2013-11-19 12:41:53
Firstly the HTML you have for img tags is invalid. 首先， img标签的HTML无效。 Try this: 尝试这个：
<img src='C:\Users\Public\Pictures\Sample Pictures\Desert.jpg' />
Secondly, you need to use wrap('<div />'); 其次，你需要使用wrap('<div />'); on them. 在他们。
$('div img').wrap('<div />');
解决方案2
0 2013-11-19 12:43:44
Using .wrap() , we can insert an HTML structure around the inner <div> elements .The new <div> element is created on the fly and added to the DOM . 使用.wrap() ，我们可以在内部<div> elements周围插入一个HTML结构。新的<div> element即时创建并添加到DOM 。 The result is a new <div> wrapped around each matched element 结果是每个matched element周围都有一个新的<div>
$( "img" ).wrap( "<div class='myClass'></div>" );
Output 产量
<div class='myClass'><img src='C:\Users\Public\Pictures\Sample Pictures\Desert.jpg'></img></div>
解决方案3
0 2013-11-19 12:45:45
Your <textarea> is not closed. 您的<textarea>未关闭。
And the solution is wrap your img tag inside Div . 解决方案是将你的img标签包装在Div中 。 This is so simple, with a single line of JQuery 这很简单，只有一行JQuery
$('img').wrap('<div />');
or 要么
$('img').wrap('<div></div>');
You can add attributes to div if you want. 如果需要，可以向div添加属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.