87,914
社区成员
发帖
与我相关
我的任务
分享js为当前元素添加父节点
现在有一些元素<select>,想在<select>元素前动态添加一个<span style="border: 1px solid red">元素。
用DOM该如何做？
用DOM该如何做？
...全文
请发表友善的回复…
发表回复
rn131456789 2012-03-30
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><html>
<title>Test</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<select id="mySelect">
<option value="1">First</option>
</select>
<script type="text/javascript">
/* var sel = document.getElementsByTagName("select")[0],
_sel = sel.cloneNode(true),
span = document.createElement("span");
span.style.border = "1px solid red"; //span.style.cssText = "border: 1px solid red";
span.appendChild(_sel);
sel.parentNode.replaceChild(span, sel);
*/
$("#mySelect").wrap("<span></span>");
$("span").css("border","1px solid red");
</script>
</body>
</html>
rn131456789 2012-03-30
- 打赏
- 举报
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><html>
<title>Test</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<select id="mySelect">
<option value="1">First</option>
</select>
<script type="text/javascript">
/* var sel = document.getElementsByTagName("select")[0],
_sel = sel.cloneNode(true),
span = document.createElement("span");
span.style.border = "1px solid red"; //span.style.cssText = "border: 1px solid red";
span.appendChild(_sel);
sel.parentNode.replaceChild(span, sel);
*/
$("#mySelect").wrap("<span></span>");
$("span").css("border","1px solid red");
</script>
</body>
</html>
001007009 2012-03-30
- 打赏
- 举报
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
<span id="a">span</span>
<br /><br />
<span id="b">span</span>
<script>
function $(el){
return typeof el == 'string' ? document.getElementById(el) : el;
}
var wrap = function(el, v){
if(typeof v == 'string'){
var tmp = document.createElement('div');
tmp.innerHTML = v;
tmp = tmp.children[0];
var _el = el.cloneNode(true);
tmp.appendChild(_el);
document.body.replaceChild(tmp, el);
}else{
var _el = el.cloneNode(true);
v.appendChild(_el)
document.body.replaceChild(v, el);
}
};
// dom
var div = document.createElement('div');
div.innerHTML = 'div';
wrap($('a'), div);
//str
div = '<div style="color:blue"></div>';
wrap($('b'), div)
</script>
</body>
</html>
试试
峭沙 2012-03-29
- 打赏
- 举报
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<select>
<option value="1">First</option>
</select>
<script>
var sel = document.getElementsByTagName("select")[0],
_sel = sel.cloneNode(true),
span = document.createElement("span");
span.style.border = "1px solid red";
//span.style.cssText = "border: 1px solid red";
span.appendChild(_sel);
sel.parentNode.replaceChild(span, sel);
</script>
</body>
</html>
默默不得鱼 2012-03-29
- 打赏
- 举报
elem.insertAdjacentHTML("beforeBegin", "<span style=\"border: 1px solid red\">");
elem.insertAdjacentHTML("afterend", "</span>");Acesidonu 2012-03-29
- 打赏
- 举报
那就在select前面插入span，然后设置select为span的子元素。
keepfool 2012-03-29
- 打赏
- 举报
[Quote=引用 6 楼 的回复:]
$("select").wrap("<span style="border: 1px solid red"></span>");
[/Quote]
DOM操作，非jQuery
$("select").wrap("<span style="border: 1px solid red"></span>");
[/Quote]
DOM操作，非jQuery
Acesidonu 2012-03-29
- 打赏
- 举报
$("select").wrap("<span style="border: 1px solid red"></span>");
keepfool 2012-03-29
- 打赏
- 举报
[Quote=引用 3 楼 的回复:]
上代码吧
[/Quote]
原本的效果是这样的
<select></select>
DOM操作后的代码是下面这样：
<span style="border: 1px solid red"><select></select></span>
遍历页面中所有的select元素在这里我省略了。其实我这样做是为了解决IE下select元素无法通过css样式直接设置边框的问题。
上代码吧
[/Quote]
原本的效果是这样的
<select></select>
DOM操作后的代码是下面这样：
<span style="border: 1px solid red"><select></select></span>
遍历页面中所有的select元素在这里我省略了。其实我这样做是为了解决IE下select元素无法通过css样式直接设置边框的问题。
还在加载中灬 2012-03-29
- 打赏
- 举报
select元素的前面
<span style="border: 1px solid red">
<select></select>
像这样？
JQuery:
$("select").before("<span style="border: 1px solid red">");
<span style="border: 1px solid red">
<select></select>
像这样？
JQuery:
$("select").before("<span style="border: 1px solid red">");
默默不得鱼 2012-03-29
- 打赏
- 举报
上代码吧
keepfool 2012-03-29
- 打赏
- 举报
[Quote=引用楼主 的回复:]
现在有一些元素<select>,想在<select>元素前动态添加一个<span style="border: 1px solid red">元素。
用DOM该如何做？
[/Quote]
貌似不行啊。
现在有一些元素<select>,想在<select>元素前动态添加一个<span style="border: 1px solid red">元素。
用DOM该如何做？
[/Quote]
貌似不行啊。
默默不得鱼 2012-03-29
- 打赏
- 举报
elem.insertAdjacentHTML("beforeBegin","<span style=\"border: 1px solid red\">*</span>");
