How to overwrite HTML node before it loads original content? - javascript

I am building a javascript file which find the tag on the page and overwrite what HTML has in e.g. when the page load the HTML is seen <h1>This is innerHTML </h1> and after the js file has loaded, it is <h1>This para has been reloaded</h1>.
If the net is fast it won't be visible but as I am creating it for end user/testing, I want to assume the internet is slow so only the JS code is loaded in the selector.
Is it possible?
<div>
<p id="one">This is the inner Text</p>
</div>
let p = document.getElementById("one");
p.innerHTML = "This is now rewritten"

You can make the div visible after your desired event completion like this:
let p = document.getElementById("one");
p.innerHTML = "This is now rewritten";
document.getElementById('myContent').style.display="block";
#myContent{
display:none;
}
<div id="myContent">
<p id="one">This is the inner Text</p>
</div>

Related

Optimal way to retrieve HTML nodes having text using JavaScript/JQuery

How to get all the HTML nodes having text in an optimal way without having to loop through every node?
In other words, grab all HTML nodes having visible text.
For example, if I have a dom as below
<div>
<span>Hello This is a Text Span</span>
<div>
<p> This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div> This is also a visible text</div>
</div>
I should select
span having text Hello This is a Text Span
p having text This is a text Paragraph
button having text This is Button Label
div having text This is also a visible text
The outermost div in the above example doesn't have text of its own so should not be part of the result.
Edit: What problem am I trying to solve?
The framework I use escapes HTML characters in labels of fields, buttons, headings etc.
For example: < is converted to & lt;'
So I am trying to write a client side code which triggers after the page is completely rendered which will unescape all the HTML texts to a readable format.
Any help will be appreciated.
Thanks in advance
The DOM property holds a numeric code indicating the node's type; text nodes use the code 3, So you can find those text nodes by filtering them having nodeType 3.
Wrap your all nodes in a div by giving a class.
Select your content by it's class like this: $(".getTextNodes").contents();.
Filter contents having nodeType 3.
selectedElement = $(".getTextNodes").contents();
textNodes = selectedElement.filter(function() {
return this.nodeType === 3;
});
console.log(textNodes);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="getTextNodes">
<span>Hello This is a Text Span</span>
<div>
<p> This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div> This is also a visible text</div>
</div>
Check this link out to read more.
I'm using just only vanilla js
My algorithm is just select all element that has no element inside it
It means select all element that has directly Text Node
let el = document.querySelectorAll('div,span,p,button');
var arr = [];
el.forEach(function(m){
if (m.querySelectorAll('div,span,p,button').length == 0){
arr.push(m)
console.log(m)
}
})
// console.log(arr)
<div>
<span>Hello This is a Text Span</span>
<div>
<p>This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div>This is also a visible text</div>
</div>
Jsfidle link click here
There's no css selector to get your needs and looping is only the solution.

html buttons change div content or toggle it again

I'd like to know how to create buttons which can change the content inside a div and if the last clicked button (actual content) is clicked again instead of change it should clear the div.
So far I got the code to create and change the content like this:
HTML
<button onclick="changeNavigation('bl1')">Techniker</button>
<button onclick="changeNavigation('bl2')">Übersetzer</button>
<button onclick="changeNavigation('bl3')">Qualitychecker</button>
<div id="text_content"></div>
<div id="bl1">
<p>This is text 1</p>
</div>
<div id="bl2">
<p>This is text 2</p>
</div>
<div id="bl3">
<p>This is text 3</p>
</div>
JS
function changeNavigation(id) {
document.getElementbyId('text_content').innerHTML= document.getElementbyId(id).innerHTML;
}
With this code so far I can make the content inside the div change by clicking the bottons. But once the box has been filex I can only change the inside content. If I click the button from the actual content again nothing happens but I'd like to clear the content.
Can maybe anyone explain me or link me the name of such a funtion?
Thanks in advance!
Im not really sure what you're trying to get here? If you click a nav item twice to clear the div?
If so try something like this
function changeNavigation(id) {
var textContent = document.getElementbyId('text_content'),
containerDiv = document.getElementbyId(id);
if(textContent.innerHTML === containerDiv.innerHTML){
textContent.innerHTML = '';
} else {
textContent.innerHTML = containerDiv.innerHTML
}
}
What we're doing here is checking if the text_content is the same value as the div you're getting the content from. if so then empty it.

Get text after certain element (JavaScript or JQuery) [duplicate]

This question already has answers here:
Using .text() to retrieve only text not nested in child tags
(30 answers)
Closed 5 years ago.
Could some one give me some guidance on what's the best way to do this.
I'm trying to get all the text which is after ".main"
I know this might be simple, but it's been picking at my brain all day just before Christmas. So i thought instead of stressing myself out, I would look for some guidance.
The example code only brings back the Text in P tag but i'd like to bring back Text not in it's own element and the p tag
console.log($("#container").find(".main").next().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div class="main"> WOOP IN MAIN </div>
Text not in it's own element
<p> Text in P tag </p>
</div>
The simplest way to achieve this is to clone() the container, remove the .main element from it, then get the text(), like this:
var text = $("#container").clone().find('.main').remove().end().text();
console.log(text.trim());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div class="main"> WOOP IN MAIN </div>
Text not in it's own element
<p> Text in P tag </p>
</div>
You could alternatively recursively traverse through the DOM nodes that follow the .main element, but this is much more complicated and gives the same result.
It's because Text not in it's own element is considered a text node, therefore next() will target the <p/> tag, being that it's an HTMLElement. If you were to go native you'd use a combination of nextSibling, which is agnostic of the two node types and nextElementSibling, which as it's method name implies, grabs the next sibling element:
const main = document.querySelector('.main');
const txt = [
main.nextSibling.textContent.trim(),
main.nextElementSibling.textContent.trim()
];
console.log(txt)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div class="main"> WOOP IN MAIN </div>
Text not in it's own element
<p> Text in P tag </p>
</div>

Storing text that has overflown in js var

I realise this is a bit of an odd question as it's slightly contradictory but I'd like to be able to hide text that doesn't fit into a div. That much is easy but then I need to take the text that is hidden and store it in a js variable so that i can make it visible on a button click so for example:
<html>
<body>
<div style = "height:10px;width:50px;word-wrap:break-word;overflow:hidden">
<p id = "text">Text that is too big for div</p>
</div>
</body>
</html>
JS
var overflow = /*equates to overflow of div*/
$(document).click(function(){
document.getElementById('text').innerHTML = overflow
})
Something like that.
Why not just get rid of the overflow: hidden property on click?
var content = document.getElementById('content'),
button = document.getElementById('unhide');
button.addEventListener('click', function(){
content.style.overflow = 'visible';
});
<button id="unhide" type="button">Unhide</button>
<div id="content" style="height:35px;width:100px;word-wrap:break-word;overflow:hidden">
<p>Text that is too big for div. Text that is too big for div.
Text that is too big for div. Text that is too big for div. </p>
</div>

Onclick HTML Div

I have a text to speak script and it is called by Javascript on HTML like this;
<head>
<script src="speakClient.js"></script>
</head>
<body>
<button onclick="speak('type text to speak here')">Talk</button>
<div class="article">
<p>Sample text is here!!</p>
</div>
<div id="audio"></div>
</body>
Currently when 'Talk' button is pressed, the predefined text (in this case "type text to speak here") will be speak by TTS.
How to change it when button is pressed, it speaks whatever text inside div.article instead of predefined text?
Edit: Link to JS https://github.com/kripken/speak.js/blob/master/speakClient.js
Thanks in advance
You can get the textual content of an element easily with jQuery:
var textToSpeak = $('div.article').text();
Then set the onclick function dynamically:
<button onclick="speak($('div.article').text())">Talk</button>
It is better than using pure JavaScript and innerHTML property, as potential HTML tags will be stripped with this solution.
<div class="article">
<script>var text = "Sample text is here!!";</script>
</div>
<button onclick="speak(text)">Talk</button>
Give an id to the <p> tag, and then you can pull out the value by calling innerHtml.
Example:
<button onclick="speak(document.getElementById('textToUse').innerHTML)">Talk</button>
<div class="article">
<p id="textToUse">Sample text is here!!</p>
</div>
Try adding the following script to the element of which you want the text read.
onclick="speak(this.innerText);"

Categories