帮助使用dom创建一个新的链接元素并插入它... [英] Help with using the dom to create a new link element and inserting it...
问题描述
我正在努力了解如何使用dom，而我正在努力做的事情
是插入一个链接在html中的另一个链接之前，基于它'
href值。这不是一个真实世界的例子 - 我只是试图分阶段做这个，以了解发生了什么。我收到一个错误
（对象不支持这个属性或方法）在IE中我不能
弄明白我是什么做错了。谁能告诉我？
if（navigator.appName ==" Microsoft Internet Explorer"）
{
var browser =" IE";
}
else
{
var browser =" notIE";
}
var e = document.getElementById（''contentWrapper''）;
if（e）
{
var a = e.getElementsByTagName（''a''）;
for（var i = 0; i< a.length; i ++）
{
if（browser ==" IE"）
{
if（a [i] .getAttribute（' 'href''）！= null&&
a [i] .getAttribute（''href''，2）.indexOf（"：//"）> = 0& ;&
a [i] .getAttribute（''href''，2）.indexOf（" bcbsal.org"）== -1）
{
var iconLink = e.createElement（''a''）;
iconLink.href = a [i] .href;
iconLink。 title =''此链接将您带到另一个网站。';
iconLink.appendChild（ec reateTextNode（''Test''））;
a [i] .title =''此链接将您带到另一个网站。'';
a [i]。 parentNode.insertBefore（iconLink，a [i]）;
}
}
else ....
谢谢！
Holli
嗯，我发现我必须将e改为
行上的文件：
var iconLink = e.createElement（''a''）;改为
var iconLink = document.createElement（''a''）;
现在，IE就冻结了。怎么办？我猜这对某人来说会很简单。
谢谢！
Holli
hg*****@bcbsal.org aécrit：
我正在努力了解如何使用dom，而我正在努力做的事情
就是在之前插入一个链接html中的另一个链接基于它的href值。这不是一个真实世界的例子 - 我只是想分阶段做这个，以了解发生了什么。我在IE中得到一个错误
（对象不支持这个属性或方法），我不能弄清楚我做错了什么。谁能告诉我？
if（navigator.appName ==" Microsoft Internet Explorer"）
var IE = false; / * @ cc_on IE = true; @ * /
{
var browser =" IE" ;;
}
{var browser =" notIE" ;
}
var e = document.getElementById（''contentWrapper''）;
if（e）
{
var a = e.getElementsByTagName（'' a（'）;
for（var i = 0; i< a.length; i ++）
{
if（browser ==" IE"）
if（IE）{
if（a [i] .getAttribute（''href''）！= null&&
a [i] .getAttribute（''href ''，2）.indexOf（"："）> = 0&&
a [i] .getAttribute（''href''，2）.indexOf（" bcbsal。 org）== -1）
var lk = a [i] .href;
if（lk&& lk .indexOf（''：//''）> 0&& lk.indexOf（''bcbsal.org''）< 0）ment（''''）;
{
var iconLink = document.createElement（''A''）;
iconLink.href = lk;
iconLink.title = ''此链接将您带到另一个网站。'';
iconLink.innerHTML =''测试'';
/ *
或
iconLink.firstChild.nodeValue =''测试'';
或
var tx = document.createTextNode（''Test''）;
inconLink.appendChild（tx）;
* /
a [i] .title =''此链接将您带到另一个网站。'';
a [i] .parentNode.insertBefore（iconLink，a [i]）;
}
}
}
-
Stephane Moriaux et son [moins] vieux Mac
hg ***** @ bcbsal.org 写道：
我正在努力理解如何工作dom，我正在努力做的事情
是在html的另一个链接之前插入一个链接，基于它的href值。这不是一个真实世界的例子 - 我只是想分阶段做这个，以了解发生了什么。我在IE中得到一个错误
（对象不支持这个属性或方法），我不能弄清楚我做错了什么。有人能告诉我吗？
不要在贴出的代码中使用制表符进行缩进，使用2（首选）或4
空格。手动将代码包装成大约70个字符以防止
自动换行，否则可能会出现错误，而不是在
原始代码中。
if（navigator.appName ==" Microsoft Internet Explorer"）
立即抛弃，浏览器嗅探已经不再流行了
多年来，功能检测风靡一时。
{
var browser =" IE" ;;
}
其他
{
var browser =" notIE";
}
var e = document.getElementById（''contentWrapper''）;
为变量提供有意义的名称要好得多，单个
字母可以用于计数器等等，你的选择。
var wrapper;
if（document.getElementById）{
wrapper = document.getElementById（''contentWrapper''）;
if（e）
好，你检查getElementById是否返回了什么。 :-)
{
var a = e.getElementsByTagName（''a''）;
'''''现在是A元素的集合，这些元素是
''contentWrapper''的后代。这些集合的一个特点是它们是实时的 -
，当您在下面的代码中将content元素添加到contentWrapper时，它们也会被添加到集合中。
。
这对你的循环产生了影响 - 长度不断增加
更长，因为你插入当前节点之前，它将保持
插入永远一旦if条件成立。
for（var i = 0; i< a.length; i ++）
它更多有效（虽然通常不是很明显）只能获得一次收集的长度
。在这种情况下每次获取长度
将导致你进入无限循环，因为你在当前节点之前插入
节点 - 更好地从末端循环到
开始使用while，然后插入的节点超出你的位置
目前正在检查：
var i = a .length;
while（i - ）{
{
if（browser ==" IE"）
<抛弃那个。
{
if（a [i] .getAttribute（''href''）！= null&&& br /> a [i] .getAttribute（''href''，2）.indexOf（"：//"）> = 0&&
a [i] .getAttribute（'' href''，2）.indexOf（" bcbsal.org"）== -1）
直接访问属性更容易，但它不是标准的
比get / setAttribute更受支持。获得一次元素的
引用也更好，而不是多次查找[i]
：
var i = a.length;
while（i - ）{
tmp = a [i];
indexOf效率非常高，但是你可以考虑使用正则表达式而只考虑一个测试，而不是做所有那些测试。
if（/ bcbsal\.org / .test（temp.href））
如果元素没有值为href属性的值为
，则上述内容将返回false或者它与bcbsal.org不匹配。您可能希望
也使测试用例不敏感：
if（/bcbsal\.org/i.test(temp.href））
{
var iconLink = e.createElement（''a''）;
这是导致错误的行：''e''是对
元素的引用，元素实现HTML元素接口'$
有一个createElement（）方法，属于HTML文档
界面所以你必须用''document''来调用它：
var iconLink = document.createElement（''''）;
一些链接：
DOM 2核心文档界面：
< URL：http：//www.w3.org/TR/DOM-Level-2-Core/core.html#i-Document>
DOM 2核心元素接口：
< URL：http：//www.w3.org/TR/DOM-Level-2-Core/core.html#ID -745549614>
DOM 2 HTML规范中定义了更多接口：
< URL：http：//www.w3.org/TR /DOM-Level-2-HTML/html.html>
iconLink.href = a [i] .href;
这里的问题是你在节点之前插入一个A元素，
使节点成为集合中的i + 1节点，所以下一个循环测试
相同的节点，匹配href，插入另一个链接，再次移动节点+1
等等/ ad infinitum /。
iconLink.title =''此链接将您带到另一个网站。'';
iconLink.appendChild（e.createTextNode（''Test''））;
同样，createTextNode是一种文档方法，而不是元素：
iconLink.appendChild（document.createTextNode（''Test''） ）;
a [i] .title =''此链接将您带到另一个网站。'';
a [i] .parentNode.insertBefore（iconLink，a [i]）;
}
}
其他....
全部放在一起：
< div id =" contentWrapper">< br>
< a href =" http：//www.bcbsal.org"> bcbsal.org< / a>< br>
< a href =" http：//www.apple.com"> Apple a< / a>< br>
< a href ="">清空< / a>< br>
< / div>
< script type =" text / javascript">
if（document.getElementById）{
var wrapper = document.getElementById（''contentWrapper''） ;
if（wrapper）{
var a = wrapper.getElementsByT agName（''a''）;
var tmp;
var iconLink;
var i = a.length;
while（i - ）{
tmp = a [i];
if（/bcbsal\.org /.test(tmp.href））{
iconLink = document.createElement（''a''）;
iconLink.href = tmp.href;
iconLink.title =''此链接将您带到另一个网站。';;
iconLink.appendChild（document.createTextNode（''Test''））;
tmp.title =''此链接将您带到另一个网站。';
tmp.parentNode.insertBefore（iconLink，tmp）;
}
}
}
}
< / script>
< br $>
-
Rob
小组常见问题：<网址：http：//www.jibbering.com/faq/>
Hi,
I''m trying to understand how to work the dom, and all I''m trying to do
is insert a link right before another link in the html based on it''s
href value. This isn''t a real world example - I''m just trying to do
this in phases to understand what''s going on. I''m getting an error
(Object doesn''t support this property or method) in IE and I can''t
figure out what I''m doing wrong. Can anyone tell me?
if (navigator.appName == "Microsoft Internet Explorer")
{
var browser="IE";
}
else
{
var browser="notIE";
}
var e = document.getElementById(''contentWrapper'');
if (e)
{
var a=e.getElementsByTagName(''a'');
for (var i=0;i<a.length;i++)
{
if (browser == "IE")
{
if (a[i].getAttribute(''href'') != null &&
a[i].getAttribute(''href'',2).indexOf("://") >= 0 &&
a[i].getAttribute(''href'',2).indexOf("bcbsal.org") == -1)
{
var iconLink = e.createElement(''a'');
iconLink.href = a[i].href;
iconLink.title = ''This link takes you to another web site.'';
iconLink.appendChild(e.createTextNode(''Test''));
a[i].title = ''This link takes you to another web site.'';
a[i].parentNode.insertBefore(iconLink,a[i]);
}
}
else....
Thanks!
Holli
Well, I figured out that I have to change the e to document on this
line:
var iconLink = e.createElement(''a''); change to
var iconLink = document.createElement(''a'');
Now, IE just freezes. Now what? I''m guessing this will be an easy
answer for someone.
Thanks!
Holli
hg*****@bcbsal.org a écrit :Hi,
I''m trying to understand how to work the dom, and all I''m trying to do
is insert a link right before another link in the html based on it''s
href value. This isn''t a real world example - I''m just trying to do
this in phases to understand what''s going on. I''m getting an error
(Object doesn''t support this property or method) in IE and I can''t
figure out what I''m doing wrong. Can anyone tell me?
if (navigator.appName == "Microsoft Internet Explorer")
var IE = false; /*@cc_on IE = true; @*/
{
var browser="IE";
}
else
{
var browser="notIE";
}
var e = document.getElementById(''contentWrapper'');
if (e)
{
var a=e.getElementsByTagName(''a'');
for (var i=0;i<a.length;i++)
{
if (browser == "IE")
if(IE) {
if (a[i].getAttribute(''href'') != null &&
a[i].getAttribute(''href'',2).indexOf("://") >= 0 &&
a[i].getAttribute(''href'',2).indexOf("bcbsal.org") == -1)
var lk = a[i].href;
if( lk && lk.indexOf(''://'')>0 && lk.indexOf(''bcbsal.org'')<0)ment(''a'');
{
var iconLink = document.createElement(''A'');
iconLink.href = lk;
iconLink.title = ''This link takes you to another web site.'';
iconLink.innerHTML = ''Test'';
/*
or
iconLink.firstChild.nodeValue = ''Test'';
or
var tx = document.createTextNode(''Test'');
inconLink.appendChild(tx);
*/
a[i].title = ''This link takes you to another web site.'';
a[i].parentNode.insertBefore(iconLink,a[i]);
}
}
}
--
Stephane Moriaux et son [moins] vieux Mac
hg*****@bcbsal.org wrote:Hi,
I''m trying to understand how to work the dom, and all I''m trying to do
is insert a link right before another link in the html based on it''s
href value. This isn''t a real world example - I''m just trying to do
this in phases to understand what''s going on. I''m getting an error
(Object doesn''t support this property or method) in IE and I can''t
figure out what I''m doing wrong. Can anyone tell me?
Don''t use tabs for indents in posted code, use 2 (preferred) or 4
spaces. Manually wrap code at about 70 characters to prevent
auto-wrapping, otherwise errors may be introduced there weren''t in the
original code.
if (navigator.appName == "Microsoft Internet Explorer")
Ditch that straight away, browser sniffing has been out of vogue for
many years, feature detection is all the rage.
{
var browser="IE";
}
else
{
var browser="notIE";
}
var e = document.getElementById(''contentWrapper'');
It is much better to give your variables meaningful names, single
letters are OK for counters and such, your choice.
var wrapper;
if (document.getElementById){
wrapper = document.getElementById(''contentWrapper'');
if (e)
Good, you check that getElementById returned something. :-)
{
var a=e.getElementsByTagName(''a'');
''a'' is now a collection of the ''A'' elements that are decedents of
''contentWrapper''. A feature of such collections is that they are live -
as you add A elements to contentWrapper in your code below, they are
also added to the collection.
This has ramifications for your loop below - the length keeps getting
longer and because you insertBefore the current node, it will keep
inserting forever once the if condition is true.
for (var i=0;i<a.length;i++)
It is more efficient (though often not noticeably so) to get the length
of the collection once only. Getting the length every time in this case
will cause you go to into an endless loop because you keep inserting
nodes before the current one - better to loop from the end back to the
start using while, then the inserted nodes are beyond where you are
currently checking:
var i = a.length;
while (i--){
{
if (browser == "IE")
Ditch that.
{
if (a[i].getAttribute(''href'') != null &&
a[i].getAttribute(''href'',2).indexOf("://") >= 0 &&
a[i].getAttribute(''href'',2).indexOf("bcbsal.org") == -1)
It is easier to access properties directly, though it''s not standard it
is better supported than get/setAttribute. It is also better to get a
reference to the element once and use that rather than lookup a[i]
multiple times:
var i = a.length;
while (i--){
tmp = a[i];
indexOf is pretty efficient, but rather than doing all those tests you
might consider using a regular expression and just the one test:
if ( /bcbsal\.org/.test(temp.href) )
The above will return false if either the element doesn''t have a value
for the href attribute or it doesn''t match "bcbsal.org". You might want
to also make the test case insensitive:
if ( /bcbsal\.org/i.test(temp.href) )
{
var iconLink = e.createElement(''a'');
This is the line that is causing your error: ''e'' is a reference to an
element, elements implement the HTML element interface which doesn''t
have a createElement() method, that belongs to the HTML document
interface so you have to call it with ''document'':
var iconLink = document.createElement(''a'');
Some links:
DOM 2 Core Document Interface:
<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#i-Document>
DOM 2 Core Element Interface:
<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614>
There are further interfaces defined in the DOM 2 HTML spec:
<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html>
iconLink.href = a[i].href;
The problem here is that you insert an A element before a node, which
makes the node the i+1 node in the collection, so the next loop tests
the same node, matches the href, inserts another link, moves the node +1
again, etc. /ad infinitum/.
iconLink.title = ''This link takes you to another web site.'';
iconLink.appendChild(e.createTextNode(''Test''));
Again, createTextNode is a method of document, not element:
iconLink.appendChild(document.createTextNode(''Test ''));
a[i].title = ''This link takes you to another web site.'';
a[i].parentNode.insertBefore(iconLink,a[i]);
}
}
else....
Putting it all together:
<div id="contentWrapper"><br>
<a href="http://www.bcbsal.org">bcbsal.org</a><br>
<a href="http://www.apple.com">Apple a</a><br>
<a href="">Empty a</a><br>
</div>
<script type="text/javascript">
if (document.getElementById){
var wrapper = document.getElementById(''contentWrapper'');
if (wrapper){
var a = wrapper.getElementsByTagName(''a'');
var tmp;
var iconLink;
var i = a.length;
while (i--){
tmp = a[i];
if ( /bcbsal\.org/.test(tmp.href) ){
iconLink = document.createElement(''a'');
iconLink.href = tmp.href;
iconLink.title = ''This link takes you to another web site.'';
iconLink.appendChild(document.createTextNode(''Test ''));
tmp.title = ''This link takes you to another web site.'';
tmp.parentNode.insertBefore(iconLink,tmp);
}
}
}
}
</script>
--
Rob
Group FAQ: <URL:http://www.jibbering.com/faq/>
这篇关于帮助使用dom创建一个新的链接元素并插入它...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
