Develop Reference

Is it possible to replace text with another just with JS?

I have in header this code:
<h1 class="header-title">
<span>Title</span>
</h1>
Then on page content I have:
<div id="content">
<h1 class="category-title">Nike</h1>
</div>
I can't edit header in backend, I just can add JS code before tag. So my question is, it's possible to use JS and take the title from content and replace it with the h1 title in header? The title in header is the same on all pages, I want to have there "category-title".

You need to add an event listener to the DOMContentLoaded-event (this makes sure Javascript can access the elements on the page). In this listener, read the text from one element and set the other element's text to it:
document.addEventListener('DOMContentLoaded', function() {
let headline = document.querySelector('#content h1.category-title').textContent;
document.querySelector('h1.header-title span').textContent = headline;
})
<h1 class="header-title">
<span>Title</span>
</h1>
<div id="content">
<h1 class="category-title">Nike</h1>
</div>

document.getElementById("title").innerText = document.getElementById("content").innerText;
<h1 class="header-title">
<span id="title">Title</span>
</h1>
<div id="content">
<h1 id="content" class="category-title">Nike</h1>
</div>

Yet it is possible.
<h1 class="header-title">
<span id="title">Title</span> <!-- add some title !-->
</h1>
<div id="content">
<h1 id="category_title" class="category-title">Nike</h1> <!-- add some title !-->
on your js
<script>
var title = document.getElementById('title'); //get the element of the header
var category_title = document.getElementById('category_title'); //get the element of the category
title.innerHTML = category_title.innerHTML; //the content of category will now be the content of you title
</script>
Hope that helps you!

How to find the html after unwrap the div element using Jquery

I have following html code
<div class="main">
<div id="magicdomid2" class="">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class=""><br></div>
<div id="magicdomid4" class="">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class=""><br></div>
<div id="magicdomid6" class="">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>
Here is the html content
var html = $(".main").html();
I need to get the following htm in a variable
<div class="main">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
<br>
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
<br>
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
I tried following code
var text = $('div.main div').contents().unwrap().siblings('div').remove();
The variable "text" will get an object and i need the html content in a variable.. Please help me to find it.
Is their any possibility to export the customised html or xml format from etherpad ??

May it Help!
var htm = "";
$("div[id^='magicdomid']").each(function(i,val){
htm = htm + $(this).html();
});
$("div[class='main']").empty().html(htm);
//You can also use this for the same
$("div[id^='magicdomid']")
.contents()
.filter(function() {
return this.nodeType === 1;
})
.unwrap()
.end()
.filter(function() {
return this.nodeType === 3;
})
.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="magicdomid2" class="">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class=""><br></div>
<div id="magicdomid4" class="">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class=""><br></div>
<div id="magicdomid6" class="">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>

unwrap and contents might not be the best to use in this case as they tend to modify the actual DOM tree rather than the html variable.
Try this:
// create empty div
var htmlContent = $('<div class="main"></div>');
// loop over magic class & append its content
$('.main .magic').each(function(i, n) {
htmlContent.append($(this).html());
});
// wrap & move one level above to get "main" div in html string
htmlString = htmlContent.wrap('<div></div>').parent().html();
console.log(htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div id="magicdomid2" class="magic">
<center style="width:100%;margin:0 auto;list-style-position:inside;display:block;text-align:center">
<h1><span class="b"><b>Welcome to Etherpad!</b></span></h1>
</center>
</div>
<div id="magicdomid3" class="magic"><br></div>
<div id="magicdomid4" class="magic">
<span class="">This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
</span>
</div>
<div id="magicdomid5" class="magic"><br></div>
<div id="magicdomid6" class="magic">
<span class="">Get involved with Etherpad at </span>
<span class=" url">http://etherpad.org
</span>
</div>
</div>

jQuery to iterate through class elements, grab text, insert elsewhere

I need to programmatically extract titles within a webpage, inject anchor links right above those titles and then inject navigation links near the top of the page that will link to those anchors within the same page.
I need jQuery to select all headings with the class of 'iphorm-group-title’ and extract the text.
Above each heading, excluding the first heading, an anchor tag needs to be injected so that a visitor can link to that section of the page.
The text of each heading, excluding the first heading, needs to be injected before the first heading and linked to all the anchor tags that were injected in the previous step.
This form is generated by a plugin or I would just edit the HTML.
For reference, the page is located at:
http://mountpleasantmagazine.com/BestOfBallot/
Here is an example of the HTML as of now.
<div>
<div>
<div class="iphorm-group-title">VOTER INFO</div>
</div>
<div>
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
<div>
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
<div>
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>
Here is some JS that will grab the elements and loop through the text, which is the point where I'm stuck.
jQuery('.iphorm-group-title').each(function () {
console.log(jQuery(this).text());
});
Here is how the HTML is expected to look after injecting the code.
<div>
<div>
SHOPPING & GOODS | FOOD & DRINK | <a href="#entertainmentleisure">ENTERTAINMENT & LEISURE</ a>
</div>
<div>
<div class="iphorm-group-title">VOTER INFO</div>
</div>
<div>
<a name="shoppinggoods"></a>
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
<div>
<a name="fooddrink"></a>
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
<div>
<a name="entertainmentleisure"></a>
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>

I just made a code snippet for you hope so it's the exact what you needed.
var listElement=jQuery("<div id='menuList'></div>").insertBefore(".iphorm-elements");
jQuery(".iphorm-elements .iphorm-group-wrap:not(:first-child)")
.each(function() {
if (jQuery(this)
.not(".iphorm-group-wrap:first")) {
var heading = jQuery(this)
.find(".iphorm-group-title");
var headingName = heading.text()
.split(' ')
.join('')
.replace('&', '');
var lowerHeading = headingName.toLowerCase();
var anchorUrl = [lowerHeading.slice(0, 0), lowerHeading.slice(0)].join('');
var anchorText = heading.text();
var anchorLink=jQuery('<a name="' + anchorUrl + '"></a>')
.insertBefore(heading);
var anchorLink2=jQuery('' + anchorText + '' +"<span> | </span>")
.insertBefore(heading);
jQuery(listElement).append(anchorLink2);
}
});
jQuery("#menuList span:last-child").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iphorm-elements">
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">VOTER INFO</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">SHOPPING & GOODS</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">FOOD & DRINK</div>
</div>
</div>
<div class="iphorm-group-wrap">
<div class="iphorm-group-title-description-wrap">
<div class="iphorm-group-title">ENTERTAINMENT & LEISURE</div>
</div>
</div>
</div>

Uncaught TypeError: Cannot set property 'innerHTML' of null- when setting the innerhtml to a string from an array

In the following code I am trying to set the cat names in a way that doesn't hardcode them to the html. Because of that I am using an array. however whenever I try to set the innerHTML properties to catNames[0] or catNames[1] I get an error. I don't know why it doesn't evaluate that array and find the string and put that on the page.
HTML
<html>
<head>
<title>Cat Clicker</title>
</head>
<body>
<div>
<!-- name -->
<h1 id="creatname1">y</h1>
<!-- clickable image -->
<img id="cat" src="img/cat.jpg">
<!-- text -->
<p> You have clicked
<strong id="counter1">0</strong> times
</p>
</div>
<div>
<!-- name -->
<h1 id="createname2">x</h1>
<!-- clickable image -->
<img id="cat2" src="img/cat2.jpg">
<!-- text -->
<p> You have clicked <strong id="counter2">0</strong> times</p>
</div>
<script src="js/app.js"></script>
</body>
Javascript
(function(){
var image = document.getElementById('cat'), image2=
document.getElementById('cat2'),
clicks1= document.getElementById('counter1'),clicks2=
document.getElementById('counter2'),
counterNumber1=0, counterNumber2=0, catNames=["Javi","Esteban"], name1=
document.getElementById('createname1'), name2=
document.getElementById('createname2');
name1.innerHTML= catNames[0];
name2.innerHTML= catNames[1];
function imageClickHandler() {
counterNumber1++;
clicks1.innerHTML= counterNumber1;
}
function imageClickHandler2() {
counterNumber2++;
clicks2.innerHTML= counterNumber2;
}
image.addEventListener('click',imageClickHandler,false);
image2.addEventListener('click',imageClickHandler2,false);
})();

I have changed a bit your code (actually, I intended the lines and make single variable declarations to be more readable.
The error was in the id you were using. Specifically, in your HTML code you define the id creatname1 and you try to select the element with id createname1.
(function(){
var image = document.getElementById('cat');
var image2 = document.getElementById('cat2');
var clicks1 = document.getElementById('counter1');
var clicks2 = document.getElementById('counter2');
var counterNumber1=0;
var counterNumber2=0;
var catNames=["Javi","Esteban"];
var name1 = document.getElementById('createname1');
var name2 = document.getElementById('createname2');
name1.innerHTML= catNames[0];
name2.innerHTML= catNames[1];
function imageClickHandler() {
counterNumber1++;
clicks1.innerHTML= counterNumber1;
}
function imageClickHandler2() {
counterNumber2++;
clicks2.innerHTML= counterNumber2;
}
image.addEventListener('click',imageClickHandler,false);
image2.addEventListener('click',imageClickHandler2,false);
})();
<div>
<!-- name -->
<h1 id="createname1">y</h1>
<!-- clickable image -->
<img id="cat" src="img/cat.jpg">
<!-- text -->
<p> You have clicked
<strong id="counter1">0</strong> times
</p>
</div>
<div>
<!-- name -->
<h1 id="createname2">x</h1>
<!-- clickable image -->
<img id="cat2" src="img/cat2.jpg">
<!-- text -->
<p> You have clicked <strong id="counter2">0</strong> times</p>
</div>

Search the document for text to remove more than the tag it's found in

Imagine you had html code like this:
<div id="2761421" class="..." data-attributionline="testtext wrote at..." data-created-at="1342689802000" data-updated-at="1342689802000" data-user-id="36847" >
<div class="subject"> <strong>
<a name="2761421" href="#2761421">wee</a></strong>
</div>
<div class="info">
<div class="author"> author:
<span class="name"> testtext (
we)
</span>
</div>
<div class="date"> date:
<time datetime="dfgdf">dfgdfg
</time>
</div>
</div>
<hr style="clear: both;" />
<div class="text gainlayout"> some text
</div>
<div class="foot gainlayout unselectable">
<span class="menuitem postmenuitem-report">
cvbcvb
</span>
</div>
</div>
What would the javascript code look like that searches the whole document for parts where the div with data-attributionline= contains testtext to replace the whole cited div from start to finish with "Filtered"?
or
What would the javascript code look like that searches the whole document for
<span class="name">
where the name contains testtext to replace the whole div starting from
<div id="<someid>" class="..." data-attributionline="testtext<some text>" data-created-at="<somedate>" data-updated-at="<somedate>" data-user-id="<someid>" >
to the last div, ie
</span>
</div>
</div>
with "Filtered"?

There is a whole bunch of attribute selectors (see also CSS), that will match elements with attributes that start with or contain testtext.
In javascript, you can use document.querySelector[All]() or a library function that supports those to get the elements, then remove them.