How to replace an element with a completely different?

**pstein** · 03-30-2016, 08:13 AM

Assume I have the following code:

<div class"foobar">
....
<a class="aaa" .....> .... </a>
....
</div>

Now I want to completely replace the <a> element (including child stuff) by another.
I have no access to the original html code but want to modify it afterwards by Greasemonkey script.

However the following does not work:

var address = document.URL;
var div = document.getElementsByClassName("foobar.aaa")[0];
div = "<a href=\"" + address + "\">" + address + "</a>";

How else does that work?

Peter

**deathshadow** · 03-30-2016, 08:29 AM

You've got a LOT of misunderstandings in there. GetElementsByClassName only works off ONE class, not multiples, so "foobar.aaa" is gibberish. Assigning markup to a variable does NOT create a DOM element, which is what a getElements would return.

... and really you shouldn't be screwing around with markup in the scripting to begin with; the two ways of doing that -- document.write and innerHTML -- both have a slew of problems which is why their use is generally frowned upon.

To get all classes in foobar you'd have to get foobar FIRST. THEN you'd need to get all the AAA inside it... or in your case if you just want the first one, index [0]... To replace that anchor with another anchor, you need to make it as a DOM element, populate it with a value and properties, then use replaceChild on the parent.

THIS:

Code:

var
	foobar = document.getElementsByClassName('foobar')[0],
	aaa = foobar.getElementsByClassName('aaa')[0],
	newAaa = document.createElement('a');

newAaa.appendChild(document.createTextNode(address));
newAaa.href = address;
foobar.replaceChild(newAaa, aaa);

Is what I THINK you are trying to do... replace the first class="aaa" in the first class="foobar"

Generally speaking in this day and age if you are building markup as a string in JavaScript, you're doing something wrong.

**pstein** · 04-17-2016, 09:32 AM

@deathshadow: Very interesting. thank you.

However I am searching for ways to reduce the number of all these statements.

Assume that element a with class="aaa" is unique below element div with class="foobar".

1.) Can I merge somehow the first two commands like in:

oldelem = document.getElementsByClassName('foobar a.aaa')[0];

2.) Furthermore: Is there a way to replace an arbitrary element rather than replace a child. I would appreciate to write:

replaceElement(newelem, oldelem);

3.) At last I would ease the creation of a new element. Is it somehow possible to write

var address = document.URL;
newelem = document.createElement("<a href=\"" + address + "\">" + address + "</a>");

The browser engine should interpret whats passed inside the brackets. Its simply the same as if the browser would get the code from the original server:
It has to interpret and generate a corresponding DOM (sub)tree. So it should be possible to do it on-the-fly later again.

Does it work?

Thank you again
Peter

**DaveyErwin** · 04-17-2016, 04:58 PM

Originally Posted by pstein

However I am searching for ways to reduce the number of all these statements.

Assume that element a with class="aaa" is unique below element div with class="foobar".

1.) Can I merge somehow the first two commands like in

ldelem = document.getElementsByClassName('foobar a.aaa')[0];

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class=foobar>
<div class=aaa>hiyas</div>
</div>
<script>
alert(document.querySelectorAll('.foobar .aaa')[0].innerHTML)
</script>
</body>
</html>

Originally Posted by pstein

2.) Furthermore: Is there a way to replace an arbitrary element rather than replace a child. I would appreciate to write:

replaceElement(newelem, oldelem);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class=foobar>
<div class=aaa>hiyas</div>
</div>
<script>

replaceElement(document.createElement('hr'), document.querySelectorAll('.foobar .aaa')[0])
function replaceElement(newEle, oldEle){
oldEle.parentNode.replaceChild(newEle, oldEle)
}
</script>
</body>
</html>

Peter
[/QUOTE]

Thread: How to replace an element with a completely different?

Thread Tools

Rate This Thread

How to replace an element with a completely different?

Tags for this Thread

Posting Permissions