We Keep Coding

Changing text in div with Javascript

I have this code:
<div>Text: Fly London</div>
I want to change the text "Text:" with JS, so I used this:
<script>
$(document).ready(function(){
$('.p-detail-info > div:contains("Text:")').text('Another text:');
});
</script>
But if I do it, the URL will disappear. How to change it if I want to keep URL?
Thank you!

You can also do this by simply add span tag and change the span tag text
$(document).ready(function(){
$('.p-detail-info > div > span:contains("Text:")').text('Another text:');});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="p-detail-info">
<div><span>Text:</span> Fly London</div>
</div>

You'll have to select the text node, which is not possible with selectors alone, unfortunately. Select the parent div, get its first childNode (which is the text node we want), and then assign to the text node's textContent, no jQuery required:
document.querySelector('div').childNodes[0].textContent = 'Another Text';
<div>Text: Fly London</div>

Following should work fine for changing the text:
<script>$(document).ready(function(){$('.p-detail-info > div').text('Another text:');});<script>
Cheers,
Happy coding.

How to handle input parameters while generating dynamic html from jquery function

I am using below function to generate dynamic HTML.
function (content) {
$('#divMessage').append('<span>'+ content+ '</span>');
}
Here I am appending content in div with id divMessage.
Here input parameter content can be any text passed to this function.
I am facing problem when I pass data containing html elements as it distorts html. I am not aable to paste it here as its get dostorted here in stack overflow editor as well.
How can I resolve this issue, TIA.
It should append what is being passed, don't want to convert html tags to html, if html tag with data is passed then html tag with data should be the ouput.

To resolve this you need to only paser the content text to HTML
Just do this
content= $.parseHTML(content);
$('#divMessage').append('<span>'+ content+ '</span>');
Hope it will help!

You can pass html value like this.
function AddContent(content) {
$('#divMessage').append('<span>'+ content+ '</span>');
}
$("#divAppendMessage").on("click", function() {
//$('#divMessage').html(''); // If you want to clear div before append
var html='';
html+='<h1>My new message</h1>';// You can add mark up like this.Be sure for closing tag.
AddContent('<h1>My new message</h1>');// Pass html without generate markup as OP say on comment.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='divMessage'>
</div>
<button id='divAppendMessage'>Add Message</button>
May be
this fiddle solve your problem. Before get input from user convert it and reset it when bind.

How to get the value of h1 tag using JS?

I have 3 pages, the 2 pages are WordPress pages and the other 1 is a custom page template with a form. The 2 pages are created using wp-job manager plugin. The 1st page has had a dropdown menu and contains list of jobs. On the 2nd page is the description of a job.
Now, I want to get the value of h1 tag on the 2nd page after the user click the input button and pass it to the 3rd page and displayed it in one of the input textbox (Position input textbox) using JS.
How to do this?
Here's the link of the 2nd page
3rd page
HTML:
<header class="entry-header">
<h1 class="entry-title">Collections Trainer</h1>
</header>

Vanilla JavaScript solution (no framework required):
var h1Text = document.querySelector(".entry-title").textContent;

can you use jquery? if so, get the h1 values when you click the button from jquery and then sent to the other page using query string.
EDITED
Add the jquery file in your page to user jquery features. And you need to put the function inside $(document).ready() function in order to attach the function into the object.
you can learn more about jquery in https://learn.jquery.com/.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"/>
<script>
$(document).ready(function(){
$('.application_button').click(function(){
var headervalue = $(".entry-title").text();
window.location = "http://homecredit.ph/testEnvironment/4537-2/?position="+headervalue;
});
});
</script>

Use the class you've given the heading in normal js use the following.
var x = document.getElementsByClassName('entry-title').value;
console.log(x); //outputs collections trainer
If you're using jQuery then its
$('.entry-title').text
Hope that helps.

If you want to get the h1 value only after the button click you will need to put the onclick for the button.
$.(document).ready(function(){
var header1Text ='';
$('.application_button').onclick(function(){
header1Text = $('h1').html();
});
//To display it in whichever textbox you want:
$('#GivesomeIDtoYourTextBox').val(header1Text);
});
PS:You need to also include the jquery source to your page.

jQuery: To get H1 value
var gValue=jQuery("header h1.entry-title").text();
alert(gValue);
As you need to fetch values on other pages, for that you can send values via QueryString or using HTML5 LocalStorage
Sample Code:
var first_page_h1_Value=jQuery("header h1.entry-title").text();
var second_page_h1_Value=jQuery("header h1.entry-title").text();
localStorage.setItem("FirstPage", first_page_h1_Value);
localStorage.setItem("SecondPage", second_page_h1_Value);
On third Page you can get both pages header text
alert(localStorage.FirstPage);
alert(localStorage.SecondPage);

If you are using Jquery then i would recommend that you give id to your H1 tag assuming id of your H1 tag is "h1Title".
HTML:
<h1 id="h1Title">Heading here</h1>
Then to get the title you write following in JQuery:
var title = $("#h1Title").text();
//To Check Whether you are getting text or not
console.log("title :"+title);
By this you will get text of your heading.

i wanted to change the font style of the content of a specific node after fetching and parsing the DOM tree

I have html for which I want to parse a specific node and change its content, along with making the font style of the new node value to italics. I am able to parse till the specific nodevalue but am not able to get how to change the fontstyle of the nodeValue.
In case of my problem
<html>
<head>
<script src="potrait.js"></script>
</head>
<body>
<p class="q">Here comes the count</p>
<ul class="q">
<li><p class="q" align="center">1</p></li>
</ul>
</body>
</html>
i want to change '1' to one(something), (something) should be in italics.
I get till 1 using the DOM method shown below
var list=document.getElementsByTagName('ul')
list[0].firstChild.nextSibling.childNodes[0].firstChild.nodeValue = "one(something)")
I am able to change the content but I am not able to get how to change (something) to italics.
Any guidance would be really appreciable..!!

Simply wrapping "(something)" in a italic tag ?
var list=document.getElementsByTagName('ul')
list[0].firstChild.nextSibling.childNodes[0].firstChild.nodeValue = "one<i>(something)</i>")

You can do it with .innerHTML and and an <i>:
var list=document.getElementsByTagName('ul');
var p = list[0].firstElementChild.firstElementChild;
p.innerHTML = "one<i>(something)</i>";

You can use jQuery to handle this problem easily. The code will be:
$("ul li p:first").html("one<i>(something)</i>");
That means take the first p tag within a li html tag in the ul and change its html content to one<i>(something)</i>. I have made a Plunker demo for you.
Be careful, because this code will replace all the first elements in your lists on your web page, where it has a p tag. To avoid that, you can assign to your desired ul a class. For example the list in your code has already have a class called q, so the code will look like:
$(".q :first").html("one<i>(something)</i>");
EDIT: To get a specific child(not absolutely the first) you can use :nth-child(<number of child>) insted of :first. For demos look at the jQuery documentation.

Replace html placeholder text with html element using javascript

I have a scenario where i have in my page a placeholder text that I will replace after the page is fully loaded.
My problem is that the text i need to replace is a plugin of the recaptcha image, for example:
I have the text loading... which will be replaced by:
<recaptcha:recaptchacontrol ID='recaptcha' runat='server' PublicKey='kfldsjfh4378qyf43h4eidfhew' PrivateKey='sdflkdsfy908s6dfdsfkj' Theme='clean' />
I couldn't find a way to do so, any help will be appreciated.

found the answer in chat:
as the <recaptcha:...> tags are parsed by some server side plugin, they were not rendered after writing them in client side JS. so replacing works fine, but plugin didn't...

you can do any string operations (like search and replace) on document.body.innerHtml:
document.body.innerHtml = document.body.innerHtml.replace(/Loading\.\.\./g,
"<recaptcha...>");

Wrap your "Loading..." text in a <span> with a unique id, such as
<span id="removeme">Loading...</span>
Then, if you don't want to do much DOM-fu with that complex, namespaced tag, you can do the following:
var removeme = document.getElementById('removeme');
removeme.innerHTML = "<recaptcha:recaptchacontrol ...";
var recaptchaThing = removeme.firstChild;
removeme.removeChild(recaptchaThing);
var parent = removeme.parentNode;
parent.insertBefore(recaptchaThing, removeme);
parent.removeChild(removeme);
This will replace the <span> with the <recaptcha:recaptchacontrol> element, after letting the browser figure out how to build the DOM for that bizarre element. If it turns out <recaptcha:recaptchacontrol> can't be placed inside of a <span> element, make it a <div style="display:inline"> instead.