Javascript:无法控制后代节点的父节点
我正在动态创建元素(级别 1),而元素本身又创建元素(级别 2)。然而,2 级元素的子元素将“body”作为其父元素。
在下面的 HTML 代码中,spotAd2 的内容是由我的函数 createNode() 创建的。这是一个 Google Ad Sense 标记。但是,Google Ad Sense 标记会创建直接位于“body”下的元素。我需要它们在 tnDiv1 下。
function createNode( t, // type.
tn, // if type is element, tag name.
a, // if type is element, attributes.
v, // node value or text content
p, // parent
f ) // whether to make dist the first child or not.
{
n = null;
switch( t )
{
case "element":
n = document.createElement( tn );
if( a )
{
for( k in a )
{
n.setAttribute( k, a[ k ] );
}
}
break;
case "text":
case "cdata_section":
case "comment":
n = document.createTextNode(v);
break;
}
if ( p )
{
if( f )
{
p.insertBefore( n, p.firstChild );
}
else
{
p.appendChild( n );
}
}
return n;
}
spotAd2 = document.getElementById("spotAd2");
n1 = createNode("element", "div", {"id":"tnDiv1"}, "\n" , spotAd2, true);
n2 = createNode("element", "script", {"type":"text\/javascript"}, "\n" , n1, false);
n3 = createNode("comment", "", null, "\n" +
"google_ad_client = \"pub-0321943928525350\";\n" +
"/* 728x90 (main top) */\n" +
"google_ad_slot = \"2783893649\";\n" +
"google_ad_width = 728;\n" +
"google_ad_height = 90;\n" +
"//\n" , n2, false);
n4 = createNode("element", "script", {"type":"text\/javascript","src":"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js"}, "\n" , n1, false);
- - 结果:
<body>
<table cellspacing="2" cellpadding="2" border="1">
<tbody><tr>
<td>Oel ngati kemeie</td>
<td>Kamakto niwin</td>
</tr>
<tr>
<td>The ad:</td>
<td>
<div id="spotAd2">
<!-- Created by createNode() -->
<div id="tnDiv1">
<script type="text/javascript">
google_ad_client = "pub-0321943928525350";
/* 728x90 (main top) */
google_ad_slot = "2783893649";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<!-- Created by createNode() -->
</div>
</td>
</tr>
<tr>
<td>txopu ra'a tsi, tsamsiyu</td>
<td>teyrakup skxawng</td>
</tr>
</tbody></table>
<!-- Created by adsense tag, need these to be under tnDiv1 -->
<script src="http://pagead2.googlesyndication.com/pagead/expansion_embed.js"></script>
<script src="http://googleads.g.doubleclick.net/pagead/test_domain.js"></script>
<script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script>
<ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 90px; position: relative; visibility: visible; width: 728px;">
<ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 90px; position: relative; visibility: visible; width: 728px;">
<iframe width="728" scrolling="no" height="90" frameborder="0" vspace="0" style="left: 0pt; position: absolute; top: 0pt;" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-0321943928525350&output=html&h=90&slotname=2783893649&w=728&lmt=1273708979&flash=10.0.45&url=http%3A%2F%2Fkenshin.katanatechworks.com%2Ftest%2FadsBrowserSide.php&dt=1273708980294&shv=r20100422&correlator=1273708980298&frm=0&ga_vid=695691836.1273708981&ga_sid=1273708981&ga_hid=1961182006&ga_fc=0&u_tz=480&u_his=2&u_java=1&u_h=1080&u_w=1920&u_ah=1052&u_aw=1920&u_cd=24&u_nplug=5&u_nmime=38&biw=1394&bih=324&fu=0&ifi=1&dtd=955&xpc=Jl67G4xiq6&p=http%3A//kenshin.katanatechworks.com" name="google_ads_frame" marginwidth="0" marginheight="0" id="google_ads_frame1" hspace="0" allowtransparency="true">
</iframe>
</ins>
</ins>
<!-- Created by adsense tag, need these to be under tnDiv1 -->
</body>
I'm creating elements (level 1) dynamically which in turn create elements (level 2) themselves. However, the children of level 2 elements have "body" as their parent.
In the HTML code below, the content if spotAd2 is created by my function createNode(). It's a Google Ad Sense tag. However, the Google Ad Sense tag create elements that went directly under "body". I need them to by under tnDiv1.
function createNode( t, // type.
tn, // if type is element, tag name.
a, // if type is element, attributes.
v, // node value or text content
p, // parent
f ) // whether to make dist the first child or not.
{
n = null;
switch( t )
{
case "element":
n = document.createElement( tn );
if( a )
{
for( k in a )
{
n.setAttribute( k, a[ k ] );
}
}
break;
case "text":
case "cdata_section":
case "comment":
n = document.createTextNode(v);
break;
}
if ( p )
{
if( f )
{
p.insertBefore( n, p.firstChild );
}
else
{
p.appendChild( n );
}
}
return n;
}
spotAd2 = document.getElementById("spotAd2");
n1 = createNode("element", "div", {"id":"tnDiv1"}, "\n" , spotAd2, true);
n2 = createNode("element", "script", {"type":"text\/javascript"}, "\n" , n1, false);
n3 = createNode("comment", "", null, "\n" +
"google_ad_client = \"pub-0321943928525350\";\n" +
"/* 728x90 (main top) */\n" +
"google_ad_slot = \"2783893649\";\n" +
"google_ad_width = 728;\n" +
"google_ad_height = 90;\n" +
"//\n" , n2, false);
n4 = createNode("element", "script", {"type":"text\/javascript","src":"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js"}, "\n" , n1, false);
--- Result:
<body>
<table cellspacing="2" cellpadding="2" border="1">
<tbody><tr>
<td>Oel ngati kemeie</td>
<td>Kamakto niwin</td>
</tr>
<tr>
<td>The ad:</td>
<td>
<div id="spotAd2">
<!-- Created by createNode() -->
<div id="tnDiv1">
<script type="text/javascript">
google_ad_client = "pub-0321943928525350";
/* 728x90 (main top) */
google_ad_slot = "2783893649";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<!-- Created by createNode() -->
</div>
</td>
</tr>
<tr>
<td>txopu ra'a tsi, tsamsiyu</td>
<td>teyrakup skxawng</td>
</tr>
</tbody></table>
<!-- Created by adsense tag, need these to be under tnDiv1 -->
<script src="http://pagead2.googlesyndication.com/pagead/expansion_embed.js"></script>
<script src="http://googleads.g.doubleclick.net/pagead/test_domain.js"></script>
<script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script>
<ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 90px; position: relative; visibility: visible; width: 728px;">
<ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 90px; position: relative; visibility: visible; width: 728px;">
<iframe width="728" scrolling="no" height="90" frameborder="0" vspace="0" style="left: 0pt; position: absolute; top: 0pt;" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-0321943928525350&output=html&h=90&slotname=2783893649&w=728&lmt=1273708979&flash=10.0.45&url=http%3A%2F%2Fkenshin.katanatechworks.com%2Ftest%2FadsBrowserSide.php&dt=1273708980294&shv=r20100422&correlator=1273708980298&frm=0&ga_vid=695691836.1273708981&ga_sid=1273708981&ga_hid=1961182006&ga_fc=0&u_tz=480&u_his=2&u_java=1&u_h=1080&u_w=1920&u_ah=1052&u_aw=1920&u_cd=24&u_nplug=5&u_nmime=38&biw=1394&bih=324&fu=0&ifi=1&dtd=955&xpc=Jl67G4xiq6&p=http%3A//kenshin.katanatechworks.com" name="google_ads_frame" marginwidth="0" marginheight="0" id="google_ads_frame1" hspace="0" allowtransparency="true">
</iframe>
</ins>
</ins>
<!-- Created by adsense tag, need these to be under tnDiv1 -->
</body>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好吧,经过急需的睡眠(几乎 24 小时保持清醒)后,我的头脑清醒了,能够更好地分析问题(得到了同事的一些有用的意见)。
我意识到罪魁祸首是 document.write() 并且应该问这样的问题:
JavaScript - 控制 document.write 的插入点
这让我找到了很多解决方案。
然后我想出了这个原型:
瞧! AdSense 广告出现在我想要的位置。
通过一点点改进,我可以将其变成一个通用的解决方案。
Ok, after much needed sleep (been awake for almost 24 hours) my head cleared up and was able to analyze the problem better (with some helpful inputs from my colleagues).
I realized that the culprit is document.write() and should have asked something like this:
JavaScript - controlling the insertion point for document.write
Which lead me to a whole lot of solutions.
I then came up with this prototype:
Voila! The AdSense ad showed up where I want it to be.
With a little bit of refinement, I can turn this into a generic solution.