By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,523 Members | 1,938 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,523 IT Pros & Developers. It's quick & easy.

Replace all <br> in a div in current document

P: n/a
I have done this simple function, it seems to work as intended, to
solve a problem i have had for a while. I couldnt find any sample
around that was working for me.
I would like to test it with you and see if there are any improvments
that i should make ;-)
It should be fast and if possible compatible with todays modern
browser-standards. It should be activated by the onload-event.

This is my code, free for all to use:

<html><head>
<title>brTest</title>
</head>
<body>
<br>
<div id=mybrid>
<a id=myid1 href="#">Text 1 with<br>a linebreak (&lt;br&gt;)</a>
<br clear="all">
<a id=myid2 href="#">Text 2 with<br>a linebreak (&lt;br&gt;)</a>
</div>
<br>
<a id=myid3 href="#">Text 3 with<br>a linebreak (&lt;br&gt;) that
should remain as it is.</a>
<br><br>
<SCRIPT LANGUAGE="JavaScript"><!--
function brTest(){
var d=document.getElementById;
d("mybrid").innerHTML=d("mybrid").innerHTML.replac e(/<br>/gim,"&nbsp;");
}
//--></SCRIPT>
<form>
<button onclick="brTest();">Call brTest()</button>
</form>
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
la************@varbostad.se (Lasse) writes:
I have done this simple function, it seems to work as intended, to
solve a problem i have had for a while. I couldnt find any sample
around that was working for me.
I would like to test it with you and see if there are any improvments
that i should make ;-)
I have had cases where
element.innerHTML = element.innerHTML
changed how the page worked, mostly wrt. event handlers. Also,
innerHTML is not compatible with modern standards (event if modern
browsers understand it)

I would prefer:

<script type="text/javascript">
function brTest(){
var brs = document.getElementById("mybrid").getElementsByTag Name("br");
for(var i=brs.length-1;i>=0;i--) {
var elem = brs[i];
elem.parentNode.removeChild(elem);
}
}
</script>

(no language attribute on the script tag and no HTML comments in the
script area!)
It should be fast and if possible compatible with todays modern
browser-standards.


It is pure DOM 2 Core, so that should be compatible with modern
browser standards. Tested in IE6, Mozilla Firebird 0.6, Opera
7.2beta3.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

P: n/a
la************@varbostad.se (Lasse) writes:
I have done this simple function, it seems to work as intended, to
solve a problem i have had for a while. I couldnt find any sample
around that was working for me.
I would like to test it with you and see if there are any improvments
that i should make ;-)
I have had cases where
element.innerHTML = element.innerHTML
changed how the page worked, mostly wrt. event handlers. Also,
innerHTML is not compatible with modern standards (event if modern
browsers understand it)

I would prefer:

<script type="text/javascript">
function brTest(){
var brs = document.getElementById("mybrid").getElementsByTag Name("br");
for(var i=brs.length-1;i>=0;i--) {
var elem = brs[i];
elem.parentNode.removeChild(elem);
}
}
</script>

(no language attribute on the script tag and no HTML comments in the
script area!)
It should be fast and if possible compatible with todays modern
browser-standards.


It is pure DOM 2 Core, so that should be compatible with modern
browser standards. Tested in IE6, Mozilla Firebird 0.6, Opera
7.2beta3.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3

P: n/a


Lasse wrote:
I have done this simple function, it seems to work as intended, to
solve a problem i have had for a while. I couldnt find any sample
around that was working for me.
I would like to test it with you and see if there are any improvments
that i should make ;-)
It should be fast and if possible compatible with todays modern
browser-standards. It should be activated by the onload-event.

This is my code, free for all to use:

<html><head>
<title>brTest</title>
</head>
<body>
<br>
<div id=mybrid>
<a id=myid1 href="#">Text 1 with<br>a linebreak (&lt;br&gt;)</a>
<br clear="all">
<a id=myid2 href="#">Text 2 with<br>a linebreak (&lt;br&gt;)</a>
</div>
<br>
<a id=myid3 href="#">Text 3 with<br>a linebreak (&lt;br&gt;) that
should remain as it is.</a>
<br><br>
<SCRIPT LANGUAGE="JavaScript"><!--
function brTest(){
var d=document.getElementById;
d("mybrid").innerHTML=d("mybrid").innerHTML.replac e(/<br>/gim,"&nbsp;");
}
//--></SCRIPT>
<form>
<button onclick="brTest();">Call brTest()</button>
</form>
</body>
</html>


Setting innerHTML means the browser needs to reparse the complete HTML
content of the HTML and render it. If all you want is to replace some
<br> elements then you can use the DOM (unless you want to cover IE4 but
your solution doesn't do it with the use of document.getElementById):

<html>
<head>
<title>replacing <br> elements</title>
<script type="text/javascript">
function replaceBRs (elementId, replacementText) {
var element, brs;
if (document.getElementById) {
element = document.getElementById(elementId);
if (element && element.getElementsByTagName &&
document.createTextNode) {
brs = element.getElementsByTagName('br');
while (brs.length) {
var br = brs[brs.length - 1];
var replacement = document.createTextNode(replacementText);
br.parentNode.replaceChild(replacement, br);
}
}
}
}
</script>
</head>
<body>
<p>
<input type="button" value="replace brs"
onclick="replaceBRs('testDiv', String.fromCharCode(160));">
</p>
<div id="testDiv">
<a href="http://JavaScript.faqts.com/">
JavaScript FAQTs
<br>
JavaScript Questions and Answers
</a>
<br>
<p>
All for Kibology.
<br>
Kibology for all.
</p>
</div>
</body>
</html>

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #4

P: n/a


Lasse wrote:
I have done this simple function, it seems to work as intended, to
solve a problem i have had for a while. I couldnt find any sample
around that was working for me.
I would like to test it with you and see if there are any improvments
that i should make ;-)
It should be fast and if possible compatible with todays modern
browser-standards. It should be activated by the onload-event.

This is my code, free for all to use:

<html><head>
<title>brTest</title>
</head>
<body>
<br>
<div id=mybrid>
<a id=myid1 href="#">Text 1 with<br>a linebreak (&lt;br&gt;)</a>
<br clear="all">
<a id=myid2 href="#">Text 2 with<br>a linebreak (&lt;br&gt;)</a>
</div>
<br>
<a id=myid3 href="#">Text 3 with<br>a linebreak (&lt;br&gt;) that
should remain as it is.</a>
<br><br>
<SCRIPT LANGUAGE="JavaScript"><!--
function brTest(){
var d=document.getElementById;
d("mybrid").innerHTML=d("mybrid").innerHTML.replac e(/<br>/gim,"&nbsp;");
}
//--></SCRIPT>
<form>
<button onclick="brTest();">Call brTest()</button>
</form>
</body>
</html>


Setting innerHTML means the browser needs to reparse the complete HTML
content of the HTML and render it. If all you want is to replace some
<br> elements then you can use the DOM (unless you want to cover IE4 but
your solution doesn't do it with the use of document.getElementById):

<html>
<head>
<title>replacing <br> elements</title>
<script type="text/javascript">
function replaceBRs (elementId, replacementText) {
var element, brs;
if (document.getElementById) {
element = document.getElementById(elementId);
if (element && element.getElementsByTagName &&
document.createTextNode) {
brs = element.getElementsByTagName('br');
while (brs.length) {
var br = brs[brs.length - 1];
var replacement = document.createTextNode(replacementText);
br.parentNode.replaceChild(replacement, br);
}
}
}
}
</script>
</head>
<body>
<p>
<input type="button" value="replace brs"
onclick="replaceBRs('testDiv', String.fromCharCode(160));">
</p>
<div id="testDiv">
<a href="http://JavaScript.faqts.com/">
JavaScript FAQTs
<br>
JavaScript Questions and Answers
</a>
<br>
<p>
All for Kibology.
<br>
Kibology for all.
</p>
</div>
</body>
</html>

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #5

P: n/a
Thanks a lot for your suggestions. It is a much cleaner way to do this.
One reason why i did not use getElementsByTagName("br") as identifier
was that i would like to keep <br clear="all">
Well, i could use <p> instead.
I will try it out.
/Lasse

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 20 '05 #6

P: n/a
Thanks a lot for your suggestions. It is a much cleaner way to do this.
One reason why i did not use getElementsByTagName("br") as identifier
was that i would like to keep <br clear="all">
Well, i could use <p> instead.
I will try it out.
/Lasse

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.