REplace html with another html

[Anonymous Usercript writer]

On www.youtube.com I am trying to replace:

<div id="masthead" class="" dir="ltr">
<a id="logo-container" href="/" title="YouTube home">
<img id="logo" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif"
alt="YouTube home">
</a>


<div id="masthead-user-bar-container" >
<div id="masthead-user-bar">
<div id="masthead-user">


<span id="masthead-user-expander"class="yt-uix-expander yt-uix-
expander-collapsed"data-expander-
action="yt.www.masthead.toggleExpandedMasthead"><span id="masthead-
user-wrapper" class="yt-uix-expander-head yt-rounded"
tabindex="0"><button type="button" id="masthead-user-button"
onclick=";return false;" class=" yt-uix-button yt-uix-button-text yt-
uix-button-toggle" role="button"><span class="yt-uix-button-
content"> <span id="masthead-user-image">
<span class="clip">
<span class="clip-center">
<img src="http://i1.ytimg.com/i/0vizxIIPy3xLVsPMd4isaw/1.jpg?
v=8f8172" alt="(YOUR YOUTUBE USERNAME GOES HERE">
<span class="vertical-center"></span>
</span>
</span>
</span>
<span class="masthead-user-username">YOUR YOUTUBE USERNAME GOES
HERE</span>

<span class="yt-uix-expander-arrow"></span>
</span></button></span></span>
</div>
</div>
</div>
<div id="masthead-search-bar-container" >
<div id="masthead-search-bar">
<div id="masthead-nav"><a href="/videos?feature=mh" >Browse</a><span
class="masthead-link-separator">|</span><a href="/shows?feature=mh"
>TV Shows</a> <span class="masthead-link-separator">|</
span><a href="/movies?feature=mh" >Films</a> <span
class="masthead-link-separator">|</span><a href="http://
www.youtube.com/my_videos_upload" >Upload</a></div>


<form id="masthead-search" class="search-form consolidated-form"
action="/results" onsubmit="if (_gel(&#39;masthead-search-
term&#39;).value == &#39;&#39;) return false;">

<button class="search-btn-compontent search-button yt-uix-button"
onclick="if (_gel(&#39;masthead-search-term&#39;).value == &#39;&#39;)
return false; _gel(&#39;masthead-search&#39;).submit(); return
false;;return true;" type="submit" id="search-btn" dir="ltr"
tabindex="2" role="button"><span class="yt-uix-button-content">Search
</span></button><div id="masthead-search-terms"
dir="ltr"><label><input id="masthead-search-term"
onfocus="_addclass(_gel(&#39;masthead-search&#39;),
&#39;focused&#39;); " onblur="_removeclass(_gel(&#39;masthead-
search&#39;), &#39;focused&#39;);" autocomplete="off" class="search-
term " name="search_query" value="" type="text" tabindex="1"
onkeyup="goog.i18n.bidi.setDirAttribute(event,this)" title="Search"></
label></div> </form>

</div>
</div>
</div>










With:



<div id="masthead">
<a class="logo" href="http://web.archive.org/web/20091026171708/
http://www.youtube.com/">
<img border="0" alt="" src="http://web.archive.org/web/
20091026171708im_/https://www.google.com/accounts/youtube/
youtube_pixel.gif"/>
</a>
<div id="masthead-main">
<div id="masthead-search">
<form name="searchForm" method="get" action="http://web.archive.org/
web/20091026171708/http://www.youtube.com/results" class="search-
form">
<div class="search-wrapper">

<input type="text" maxlength="128" value="" tabindex="1"
name="search_query" class="search-term" id="masthead-search-term"/>
<input type="hidden" value="" name="search_type" id="search-type-
masthead"/>
<a onclick="document.searchForm.submit(); return false;"
href="http://web.archive.org/web/20091026171708/https://www.google.com/
accounts/ForgotPasswd?service=youtube&amp;ltmpl=sso#" class="yt-button
yt-button-primary">
<span>
Search
</span>
</a>
</div>
</form>

</div>
<div id="masthead-nav-main">
<a href="http://web.archive.org/web/20091026171708/http://
www.youtube.com/">
Home
</a>
<a href="http://web.archive.org/web/20091026171708/http://
www.youtube.com/browse">
Videos
</a>
<a href="http://web.archive.org/web/20091026171708/http://
www.youtube.com/members">
Channels
</a>

<a href="http://web.archive.org/web/20091026171708/http://
www.youtube.com/shows">
Shows
</a>

Obviously I will chnage web archive stuff for no wen archive stuff
when it is working and YOUR YOUTUBE USERNAME GOES HERE will be
replaced with your YouTube username (it would be useful if someone
could give me an ID for that aswell) I have writen scripts before but
still do not much about writing scripts.

Below is what i tried:

// ==/UserScript==

var eska1, eska2, eska3;
eska1 = document.getElementById('masthead-container');

if (eska1) {
eska2.innerHTML = '
<div id="masthead" class="" dir="ltr">
<a id="logo-container" href="/" title="YouTube home">
<img id="logo" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif"
alt="YouTube home">
</a>


<div id="masthead-user-bar-container" >
<div id="masthead-user-bar">
<div id="masthead-user">


<span id="masthead-user-expander"class="yt-uix-expander yt-uix-
expander-collapsed"data-expander-
action="yt.www.masthead.toggleExpandedMasthead"><span id="masthead-
user-wrapper" class="yt-uix-expander-head yt-rounded"
tabindex="0"><button type="button" id="masthead-user-button"
onclick=";return false;" class=" yt-uix-button yt-uix-button-text yt-
uix-button-toggle" role="button"><span class="yt-uix-button-
content"> <span id="masthead-user-image">
<span class="clip">
<span class="clip-center">
<img src="http://i1.ytimg.com/i/0vizxIIPy3xLVsPMd4isaw/1.jpg?
v=8f8172" alt="MY YOUTUBE USER NAME WAS HERE">
<span class="vertical-center"></span>
</span>
</span>
</span>
<span class="masthead-user-username">MY YOUTUBE USERNAME WAS HERE</
span>

<span class="yt-uix-expander-arrow"></span>
</span></button></span></span>
</div>
</div>
</div>
<div id="masthead-search-bar-container" >
<div id="masthead-search-bar">
<div id="masthead-nav"><a href="/videos?feature=mh" >Browse</a><span
class="masthead-link-separator">|</span><a href="/shows?feature=mh"
>TV Shows</a> <span class="masthead-link-separator">|</
span><a href="/movies?feature=mh" >Films</a> <span
class="masthead-link-separator">|</span><a href="http://
www.youtube.com/my_videos_upload" >Upload</a></div>


<form id="masthead-search" class="search-form consolidated-form"
action="/results" onsubmit="if (_gel(&#39;masthead-search-
term&#39;).value == &#39;&#39;) return false;">

<button class="search-btn-compontent search-button yt-uix-button"
onclick="if (_gel(&#39;masthead-search-term&#39;).value == &#39;&#39;)
return false; _gel(&#39;masthead-search&#39;).submit(); return
false;;return true;" type="submit" id="search-btn" dir="ltr"
tabindex="2" role="button"><span class="yt-uix-button-content">Search
</span></button><div id="masthead-search-terms"
dir="ltr"><label><input id="masthead-search-term"
onfocus="_addclass(_gel(&#39;masthead-search&#39;),
&#39;focused&#39;); " onblur="_removeclass(_gel(&#39;masthead-
search&#39;), &#39;focused&#39;);" autocomplete="off" class="search-
term " name="search_query" value="" type="text" tabindex="1"
onkeyup="goog.i18n.bidi.setDirAttribute(event,this)" title="Search"></
label></div> </form>

</div>
</div>
</div>';
eska3.innerHTML = '<div id="masthead">
<a class="logo" href="http://web.archive.org/web/20091026171708/
http://www.youtube.com/">
<img border="0" alt="" src="http://web.archive.org/web/
20091026171708im_/https://www.google.com/accounts/youtube/
youtube_pixel.gif"/>
</a>
<div id="masthead-main">
<div id="masthead-search">
<form name="searchForm" method="get" action="http://web.archive.org/
web/20091026171708/http://www.youtube.com/results" class="search-
form">
<div class="search-wrapper">

<input type="text" maxlength="128" value="" tabindex="1"
name="search_query" class="search-term" id="masthead-search-term"/>
<input type="hidden" value="" name="search_type" id="search-type-
masthead"/>
<a onclick="document.searchForm.submit(); return false;"
href="http://web.archive.org/web/20091026171708/https://www.google.com/
accounts/ForgotPasswd?service=youtube&amp;ltmpl=sso#" class="yt-button
yt-button-primary">
<span>
Search
</span>
</a>
</div>
</form>

</div>
<div id="masthead-nav-main">
<a href="http://web.archive.org/web/20091026171708/http://
www.youtube.com/">
Home
</a>
<a href="http://web.archive.org/web/20091026171708/http://
www.youtube.com/browse">
Videos
</a>
<a href="http://web.archive.org/web/20091026171708/http://
www.youtube.com/members">
Channels
</a>

<a href="http://web.archive.org/web/20091026171708/http://
www.youtube.com/shows">
Shows
</a>';
eska1.innerHTML.replace(eska2, eska3);

}


Sorry if this post is TLDR but any help is apreciated.

[LWChris@LyricWiki]

Am 04.02.2012 18:02, schrieb Anonymous Usercript writer:
> On www.youtube.com I am trying to replace html.

"Replace" is a function to apply regular expressions on a text. To
modify the innerHTML, you can simply assign some new text to it like this:

element = document.getElementyById("ElementId");
element.innerHTML = "<span>New HTML</span>";

Sorry if that does not quite fit your question but it's impossible to
read through the mail with all that HTML in it.

For future posts: please ask the question on a more abstract level. You
should name the page URL, you can name the elements' IDs, and you can
also post some lines of script code you've written. But please not post
the whole website or userscript if it's just one line that doesn't work.

Chris

[Anonymous Usercript writer]

I gues post was TLDR sorry anyway that was not the entire userscript
just the code that did not work. (withb the HTMLs inluded)
Right so to replace stuff do I need to remove them then insert New
HTML or does that code automaticly remove everything covered by the
element?

[LWChris@LyricWiki]

element.innerHTML = "";

sets the innerHTML to the new source code, just like

variable = "New value";

sets the value to the new one, disposing the old one. However I want to
warn you that the results might not necessarily be the ones you
expected/wanted: some functionality might be linked to the elements by
code. Those linkage is invisible within the code, but realized browser
internally. If you replace the tags, the linkage is lost. That might
lead to unwanted side effects like clicking on elements does not trigger
an action that it did before. I don't know if that applies to that part
of the code, but some drop down buttons might apply to that. Especially
the new YouTube gets its functionality by a lot of jQuery code. If you
just want to replace some href of anchors and add elements, you should
do that single step, not by replacing the innerHTML.

Chris

[Anonymous Usercript writer]

This probably <b>too specific</b> now but script doesnt work still
sorry about posting it here but I dont have anywhere to upload it
except userscripts.org but It doesnt work.
Anyway the script:

// ==/UserScript==
element = document.getElementyById("masthead-container");
element.innerHTML = "<span><img border="0" alt="" src="http://

</a></span>";

[LWChris@LyricWiki]

Am 06.02.2012 18:40, schrieb Anonymous Usercript writer:
> document.getElementyById("masthead-container");

Sorry, my fault, there was a typo in my email: It's getElementById not
getElementyById (the y is wrong there). Guess I should look at my code
thrice next time... Sorry again.

Two tools that might come in handy for you next time you write a userscript:
The error console of Firefox (Strg+Shift+J). It would likely have shown
an entry like "getElementyById is not a function of document,
xyz_scriptname.user.js in line 56". Usually the messages are at least
telling a bit and usually giving a good point to start debugging at.
If you need to paste code anyway: www.pastebin.com is a great page for
pasting code snippets including syntax highlighting, which is
appreciated if you have long scripts. You likely know but userscripts
are JavaScript (just mentioning that in case you're not sure).

Chris

[LWChris@LyricWiki]

Am 06.02.2012 19:49, schrieb LWChris@LyricWiki:
> Am 06.02.2012 18:40, schrieb Anonymous Usercript writer:
>> document.getElementyById("masthead-container");
>

Oh, and that "Strg" key is "Ctrl" on English keyboards...