Replacing text with <span> using javascript - javascript

I need to replace each word in the textarea by a span with unique id. I need the code in JavaScript. I have tried creating a DOM element and inserting it in text area using the following code.
var s = document.createElement('span');
var text=document.createTextNode("inside tag");
s.appendChild(text);
document.getElementById("t1").appendChild(s);
t1 is the is the id of my text area. The above code isn't giving any result.
Also, I tried another method:
document.getElementById("t1").innerHTML="<span>inside tag</span>";
innerHTML isn't working here.
What do I do?

It has to be the value property instead of the innerHtml because of the fact that value property is used for setting the value for input/form elements. innerHTML on the other hand is normally used for div, span, td and similar elements.
So as you are using a textarea you shall go with value property.
document.getElementById("t1").value = "Whatever the text/html you want to insert here";

To change your value of text arena, you will have to do this:
document.getElementById('t1').value = '<span>inside tag</span>';

Related

How to grab the h3 text within a div

My website HTML has the following:
To grab the H3 text (SOME TEXT) as a variable in Tag Manager - when a user clicks on the div class "c-card c-card--primary c-parkcard " I think I need to use a DOM Element variable
But it's not returning the text.
Should the Element Selector be:
.c-card.c-card--primary.c-card__body.u-h6.c-card__title
However, it returns a null value in Tag Manager
The solution was to create a custom JS variable that when the image was clicked on would find the "c-card c-card--primary c-parkcard " div (9 parents up) and then go back down to find the h3 element by class and then return the text:
function(){
var z = {{Click Element}}.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
.getElementsByClassName('u-h6 c-card__title')[0].innerText;
return z;
}
use of getElementsByClass is as simple as:
$dom = new DOMDocument('1.0', 'utf-8');
$dom->loadHTML($html);
$content_node=$dom->getElementByClass("c-card__body");
$div_a_class_nodes=getElementsByClass($content_node, 'h3', 'u-h6 c-card__title');
You have set "h3" as "attribute name. "h3" is not an attribute (but the name of the tag). You do not want to set an attribute name at all, because you do not want to return the value of an attribute, but the innerText of the tag, and that is the default behaviour anyway.
If you use a DOM variable this will return the first instance on the page. If your selector matches several DOM nodes, you will still just get the first one, regardless if what the user clicks. If you expect this to update depending on the clicked element, you should rather use the {{Click Text}} variable (a built-in variable that you might have to enable first).
Chances are that the actual click element is not the h3, but the nested link inside, but that does not really change things for you (as in both cases the innerText will be the contained texted nodes, which in this case is the same).

Why does textContent addition assignment doesn't work with tags?

I am trying to add some text to an existing element using textContent. But when I use +=(addition assignment) operator but in the result, already existing tags like b has lost its effect. I think I am just adding to it, but it also has effect in the previous content. Can anyone explain why? I checked the docs but didn't find anything about this.
HTML:
<div id="divA">Something<b>bold</b></div>
JS
const some = document.getElementById("divA");
some.textContent += "Hi"; // This results in : "Something boldHi" without the bolded formatting.
some.textContent = some.textContent + "Hi"; //This too results in the same!
Thanks in advance!
The .textContent value of an element returns just that - the text content, which is plain text, not the HTML markup of the contents.
If you do
some.textContent += "Hi"
The text content of the container will be retrieved, which will not contain any tags - eg
<div id="divA">Something<b>bold</b></div>
will retrieve:
Something bold
Concatenating onto that and then assigning the result back to the .textContent of the element results in the element's descendants replaced with a single text node, where the text node's value is the value assigned.
If you use .innerHTML += instead, the prior HTML markup of the descendants will be preserved - but the descendants will all be re-parsed according to the HTML markup assigned, so event listeners and related things that depend on DOM elements will be lost. A better option is to use .insertAdjacentHTML, which does not require re-parsing of the descendants.
An even better option would be to append a node itself instead of trying to write HTML markup (which is potentially unsafe), eg
some.appendChild(document.createTextNode('Hi'))
When you are taking the textContent then you will get Somethingbold which is just plain text wihtout HTML tags
console.log(some.textContent); // Somethingbold
You are appending the textContent, instead you shold use innerHTML
const some = document.getElementById("divA");
some.innerHTML += "Hi"; // This results in : "Something boldHi" without the bolded formatting.
some.innerHTML = some.innerHTML + "Hi"; //This too results in the same!
<div id="divA">Something<b>bold</b></div>

What is the difference between textContent and a new text Node? [duplicate]

What's the advantage of creating a TextNode and appending it to an HTML element over setting directly its textContent?
Let's say I have a span.
var span = document.getElementById('my-span');
And I want to change its text. What's the advantage of using :
var my_text = document.createTextNode('Hello!');
span.appendChild(my_text);
over
span.textContent = 'hello';
It 's not really matter of advantage but of proper usage depending on the need.
The fundamental difference is that:
createTextNode() is a method and works just as its name says: it creates an element... then you must do something with it (like in your example, where you append it as a child);
so it is useful if you want to have a new element and place it somewhere
textContent is a property you may get or set, with a unique statement and nothing else;
so it is useful when you only want to change the content of an already existing element
Now in the precise case of your question, you said you want to change the text of the element...
To be more clear say you have the following HTML element:
<span>Original text</span>
If you're using your first solution:
var my_text = document.createTextNode('Hello!');
span.appendChild(my_text);
then it will end with:
<span>Original textHello!</span>
because you appended your textNode.
So you should use the second solution.

How to set dom's text in pure javascript?

How to set dom's text in pure javascript?
I want to set ul object's text value.
So i tried below.
getElementByID("DropDown").textContent = "text";
But the ul's child is disappeared when i set the textcontent.
It has same result in innerHtml and innerText.
getElementByID("DropDown").innerText= "text";
getElementByID("DropDown").innerHtml= "text";
Then i must appendChild(TextNode) to ul? I think it is too complex.
I must append TextNode and i must save the TextNode's ref.
Is there have any easy way?
innerHTML is just a string. If you overwrite it, it loses its previous content. But, you can append to it instead, and then it does not lose its previous content. See magic1
And magic2 shows the createElement+appendChild way. While it has more lines, it is easier to manage if you want to set various attributes of an element (style, event handlers and others - not necessarily for this particular case of list items, but in general).
var i=0;
function magic1(){
i++;
document.getElementById("myUL").innerHTML+="<li>Testx"+i+"</li>";
}
function magic2(){
i++;
var li=document.createElement("li");
li.innerHTML="Testy"+i;
document.getElementById("myUL").appendChild(li);
}
<button onclick="magic1()">ClickMe1</button>
<button onclick="magic2()">ClickMe2</button>
<ul id="myUL"></ul>

can divs hold numerical values?

I have a normal div, and I wanted to know if it can actually hold a numerical value. Take cookie clicker for instance, the number of cookies you have is shown in a div, how do I do that with my div?
<div id="myDiv">0</div>
Or
<div id="myDiv" value="0"></div>
I tried the second option, and it doesn't show my value doesn't show. I tried the first option, but what I want to do with it, it doesn't really work, because I can't edit the value with my javascript functions.
How would I do this, so that the div can hold my value and my value can be edited?
Your question isn't clear for me but is this what you want?:
you can use JavaScript to get the value of that div.
HTML
<div id="myDiv">0</div>
JavaScript
var text = $('#myDiv').text();
var text has the value of 0 now. you can do with it what you want.
You can do with the second option like the following:
SETTING THE VALUE
document.getElementById('myDiv').setAttribute('value',50)
GETTING THE VALUE
console.log(document.getElementById('myDiv').getAttribute('value'));
SUGGESTION:
Try data-value instead of value, because value is not a valid attribute of div.
Values are for form input elements.
To modify content of other elements search Javascript DOM for more.
For example:
You can edit the innerHTML property with Javascript.
https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
You'll have to convert the value because the value you're trying to pull will technically be a string.
var SomeVar = $('#MyDiv').html();
var SomeAnswer = 8 + parseInt(SomeVar);

Categories

Resources