Adding content into an element in html using javascript - javascript

I want to create a paragraph element and add content to it. Basically i want to let the textContent of a paragraph element be a string.
What i have tried doing is:
var st="Hello";
con=document.getElementById("content");
var pv=document.createElement("p");
con.appendchild(pv);
pv.setAttribute("",st);
<span id="content"> </span>
What attribute should i use to add in the setAttribute function here? I tried using textContent but it's not an attribute. Any other way i can do this?

You could do with elem.innerText instead of setAttribute
var st = "Hello";
var con = document.getElementById("content");
var pv = document.createElement("p");
con.appendChild(pv);
pv.innerText= st;
<span id="content"> </span>

You should use innerText to do this.
pv.innerText = "hello"
You can set and get the text value of an element using innerText.
More info on innerText can be found here:
https://www.w3schools.com/jsref/prop_node_innertext.asp

You can also use innerHTML which can change not just the text but also the HTML.
let con_txt = document.getElementById("content_text");
let pv_txt = document.createElement("p");
con_txt.appendChild(pv_txt);
pv_txt.innerText = "From innerText";
let con_html = document.getElementById("content_html");
let pv_html = document.createElement("p");
con_html.appendChild(pv_html);
pv_html.innerHTML = "<b>innerHTML also works!</b>"; //You can use HTML tags here
<span id="content_text"></span>
<span id="content_html"></span>
Above result in HTML
<span id="content_text">
<p>From innerText</p>
</span>
<span id="content_html">
<p><b>innerHTML also works!</b></p>
</span>
More info about innerHTML

Related

How to add break tags after inserting a paragraph into html using javascript's createElement

I've successfully inserted a paragraph element into html page using javascript but the 2nd consecutive paragraph comes side by side and I wish to add a break tag to print them in another line, how do I do that?
Here is a screenshot of my output:
Here is my javascript code:
function newtask(){
let ask = prompt("Enter the description of task");
const para = document.createElement("p");
const Textnode = document.createTextNode(ask);
para.appendChild(Textnode);
let text= document.getElementById("new")
text.appendChild(Textnode);
}
Here is the relevant html
<script src="index.js"></script>
<h1>To do List</h1>
<button onclick="newtask()">New Task</button>
<div id="new">
<p>test</p>
</div>
You were appending Textnode to your parent element, not your new <p> element. Here's a quick rewrite that should give you your desired results.
Firstly, create the new <p> element, then modify its innerText property. After that, just append your new <p>.
function newtask() {
const text = document.getElementById("new");
const ask = prompt("Enter the description of task");
const para = document.createElement("p");
para.innerText = ask;
text.appendChild(para);
}
You can wrap your p inside a div and add a display: flex configuration.
const paraDiv = document.createElement("div");
// Add your style configuration to your paraDiv
function newtask(){
let ask = prompt("Enter the description of task");
const para = document.createElement("p");
paraDiv.appendChild(para)
const Textnode = document.createTextNode(ask);
para.appendChild(Textnode);
let text= document.getElementById("new")
text.appendChild(Textnode);
}

how to get text from child element from console

I'm trying to get the which is in
as you can see:
<p class="jmbadge">
<strong>xxx</strong>
<br>
<span class="field-value">text!</span>
</p>
I'm trying to get the <span>
this is inside a website and I want to take the text of <span> via the console (Google Chrome)
here is what I tried:
const jminfo = document.getElementsByClassName("jminfo");
const span = jminfo.querySelector('span');
console.log(span);
And here is the error I get:
Uncaught TypeError: jminfo.querySelector is not a function
at <anonymous>:1:21
const jminfo = document.getElementsByClassName("jmbadge")[0];
const span = jminfo.querySelector('span');
console.log(span);
<p class="jmbadge">
<strong>xxx</strong>
<br>
<span class="field-value">text!</span>
</p>
That is because you selected a punch of elements with a class name but didn’t specify wich elements from these elements list.
Try to use:
const span = document.querySelector('.jminfo > span');
console.log(span);
but in case you know the index of the element in the document you can use:
const jminfo = document.getElementsByClassName("jmbadge")[N];
// n = the index
const span = jminfo.querySelector('span');
console.log(span);

How to get the text with in span tag using jquery?

I want get text within this span tag using its class:
<span id="prizevalue_g12" class="pull-right grid_val">£12</span>
I want to get 12. I tried the below code:
var ex_price = $(".grid_val").html();
and
ex_price = $(".grid_val").html();
You can use replace() to remove £.
$(document).ready(function(){
var ex_price = $(".grid_val").html();
ex_price = $(".grid_val").html();
var ans=ex_price.replace('£', '') ;
alert(ans);
});
This is just a tought, but I think this would be a perfect place to use some custom data-attributes, like data-value. It would work nice especially if you have a lot of these values to get.
The outcome would be smthn like this:
<!-- HTML -->
<span class="grid_val" data-value="12">£12</span>
<span class="grid_val" data-value="15">£15</span>
<span class="grid_val" data-value="13">£13</span>
<span class="grid_val" data-value="1">£1</span>
<script>
$(".grid_val").each(function(){
var value = $(this).attr("data-value");
//do something with it
});
</script>

How do I parse this piece of innerHTML in JavaScript?

I did this:
var blah = document.getElementById('id').getElementsByClassName('class')[0].innerHTML;
Now I have this in bar:
<a class="title" href="http://www.example.com/" tabindex="1">Some text goes here</a> <span class="domain">(foobar.co.uk)</span>
I want to read the string "Some text goes here" from the HTML using JS (no jQuery). I don't have access to the site's HTML. I'm parsing a webpage to inject JS for a browser extension.
Will I just have to parse it as a string and find my text from between > and < or is there a way to parse innerHTML in JS?
Basic HTML markup that I am assuming you have:
<div id="id">
<div class="class">
<a class="title" href="http://www.example.com/" tabindex="1">Some text goes here</a> <span class="domain">(foobar.co.uk)</span>
</div>
</div>
So select the anchor and read the text
var theAnchorText = document.getElementById('id').getElementsByClassName('class')[0].getElementsByTagName("a")[0].textContent;
if you need to support IE8
var theAnchor = document.getElementById('id').getElementsByClassName('class')[0].getElementsByTagName("a")[0];
var theAnchorText = theAnchor.textContent || theAnchor.innerText;
and if you are using a modern browser, querySelector makes it a lot cleaner
var theAnchorText = document.querySelector("#id .class a").textContent;
You could approach this two ways. A regexp or textContent on a temp DOM element:
var foo = "<b>bar</b>";
function regexpStrip(str) {
return str.replace(/<[^>]*>/g, '');
}
function parseViaDOM(str) {
var el = document.createElement('div');
el.innerHTML = str;
return el.textContent;
}
console.log(regexpStrip(foo)); // => "bar"
console.log(parseViaDOM(foo)); // => "bar"

How can I get the text between 2 elements

<div class="container">
asd
[I want get this text]
asd
Anouther text i dont need.
</div>
How can I withdraw the text between elements (not the inner text of elements, in this case I should get "[I want get this text]")?
DEMO
I think the simplest way would be to deal with the native dom elements:
var a = $(".container a")[0];
var textNode = a.nextSibling;
var text = textNode.textContent;
Note that var text = textNode.nodeValue; will also work, but I'm not sure which is preferable.
One way is to enclose the part in a span tag and get the contents of the span:
<div class="container">
asd
<span id="i_want_this">[I want get this text]</span>
asd
Anouther text i dont need.
</div>
myVal = $("#i_want_this").html();

Categories