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

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!

Related

How to wrap a group of sibling elements within a containing div using Vanilla JS?

I have the following HTML:
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
How can I wrap the last three elements within .container, so that the output looks like this:
<div class="container">
<h1 class="heading">heading</h1>
<div class="subcontainer">
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
</div>

It would be better to do it within the HTML, but in case due to some constraints that you can't modify the HTML, you can do the followings
const container = document.querySelector('.container');
const subcontainer = document.createElement('div');
const lastThree = Array.from(container.children).slice(-3);
subcontainer.classList.add('subcontainer');
// move the elements into the subcontainer
lastThree.forEach(node => {
subcontainer.appendChild(node);
});
container.appendChild(subcontainer);
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
The class name container is quite generic, make sure that you only select the container element you want, or else you might modify other elements unintentionally.

old_html = document.getElementsByClassName("container")[0];
firstChild = old_html.children[0];
old_html.removeChild(firstChild);
new_html = "<div class='container'>"+ firstChild.outerHTML + "<div class = 'subcontainer'>" + old_html.innerHTML + "</div></div>";
console.log(new_html);
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>

HTMLCollection shows when replacing elements in js?

I'm trying to replace an Html(Div) Into Text Element The First i created the conditions you can see it here
Html
<!-- Replace Text Here-->
<h6 class="idk1"> Replace This </h6>
<!-- Main Column -->
<div class="js-cp-main-wrp">
<div class="support-2">
<html>stuff here</html>
</div>
<div class="end-cp-wrp">
<html>stuff here</html>
<html>stuff here</html>
<html>stuff here</html>
</div>
</div>
Js Script
var woahtikcets = document.getElementsByClassName('js-cp-main-wrp');
const loadthetickets = document.getElementsByClassName('idk1');
The run this
loadthetickets.replaceWith(woahtikcets)
it show me
[object HTMLCollection] ??
this method didn't work it sigh it as undefined ? please help <3
const loadthetickets = document.getElementsByClassName('idk1')[0];

I am not at all certain about what your intention is but <html> is not just some tag in HTML. It must be the outer tag (the root of the document) and can therefore only appear once in a document. So, if you replace the <html> elements with other (legal) entities, like <span> you will very likely get some results, as you can see below:
const woahtikcets = document.querySelectorAll('.js-cp-main-wrp span'),
newtext = document.getElementsByClassName('idk1')[0].textContent;
for (var el of woahtikcets){el.textContent=newtext}
<!-- Replace Text Here-->
<h6 class="idk1"> Replace This </h6>
<!-- Main Column -->
<div class="js-cp-main-wrp">
<div class="support-2">
<span>stuff here</span>
</div>
<div class="end-cp-wrp">
<span>stuff here</span>
<span>stuff here</span>
<span>stuff here</span>
</div>
</div>
In case you want the replace operation to work in the opposite direction, you could do the following:
const newtext = document.querySelectorAll('.js-cp-main-wrp')[0].textContent,
heading = document.getElementsByClassName('idk1');
for (var el of heading){el.textContent=newtext}
<!-- Replace Text Here-->
<h6 class="idk1"> Replace This </h6>
<!-- Main Column -->
<div class="js-cp-main-wrp">
<div class="support-2">
<span>stuff here</span>
</div>
<div class="end-cp-wrp">
<span>stuff here</span>
<span>stuff here</span>
<span>stuff here</span>
</div>
</div>

I cannot take the item from the array in JavaScript despite having the array

When I type this
var sectionIntro = document.getElementsByClassName("section");
I get a list of my HTML.
However, when I try to take the first item in the array:
var sectionIntro = document.getElementsByClassName("section")[0];
I get undefined.
What is happening?
My HTML:
<section class="section">
<div id="box1">
<p class="theQuote">" We ignited, now you spark "</p>
<p class="theQuoteW">~ Alumni</p>
</div>
<div class="introduction">
<div id="box2">
<h4 id="intro">Intro</h4>
I want to take the class="section" using:
var sectionIntro = document.getElementsByClassName("section");

so the answer to this problem is the placement of javascript script in the html. I placed the script in the head, it should be at the end of the body

Load an anime.js animation html file as a background to a section in HTML

I am trying to use this a anime.js file as a background to a website banner. Here
<section id="banner">
<div class="inner">
<div class="logo">
<span class="icon fa-diamond"></span>
</div>
<!-- Animation Script -->
<!--
<script>
document.getElementById("banner").innerHTML = '<object type="text/html" data="animation/index.html"></object>';
</script>
-->
<h2>TEXT</h2>
<p>MORE TEXT</p>
</div>
</section>
I am loading the script like this but the problem is it replaces and loads the inner div completely. How should I make it load on the entire section? I also want the inner div intact.

The issue is because you're completely overwriting the HTML of the #banner element, and completely wiping out its existing contents.
To fix this create the object element separately, then use appendChild() to add it to the #banner element:
var obj = document.createElement('object');
obj.type = 'text/html';
obj.data = 'animation/index.html';
document.getElementById('banner').appendChild(obj);
<section id="banner">
<div class="inner">
<div class="logo">
<span class="icon fa-diamond"></span>
</div>
<h2>TEXT</h2>
<p>MORE TEXT</p>
</div>
</section>

Remove src from all iframes and add it on click

I'm trying to remove the src values from all my iframes and then on click load the srcs to the ones matched by a selector.
Right now I have a block of code that empties the src of my iframes and creates a variable with the src info.
After that I'm trying to check if an iframe src is empty and if so, have a function that on click of a link will add the corresponding src values to the returned iframes.
The code is as follows, but the click part is not working.
Naturally I'm not sure about the IF part, as well, since the thing as a whole is not working.
$j=jQuery.noConflict();
var iframesa = $j('iframe');
iframesa.each(function() {
var srca = $j(this).attr('src');
$j(this).data('src', srca).attr('src', '');
});
$j(document).ready(function(){
if($j('iframe').attr('src') == '') {
$j('.evento-more').click(function() {
$j(this).next().children('iframe').attr('src', function() {
return $j(this).data('src');
});
});
}
});
The HTLM structure is something like this
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.youtube.com/embed/xxxx"></iframe>
</p>
</div>
<div class="slide-text">
<p>
<iframe src="https://www.soundcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
<div class="evento-feed">
<div class="wrapper">
More
<div class="evento-desc">
<div class="slide-text">
<p>
<iframe src="https://www.mixcloud.com/embed/xxxx"></iframe>
</p>
</div>
</div>
</div>
</div>
And so on. The whole .evento-feed block gets repeated a few more times, although the content may vary
Is there anyone that can help me?

Categories

Resources