CODEWITHSUNDEEP
javascriptphphtmlcss
dr_kaiser
dr_kaiser

Reputation: 45

add h1 tag in a div which is used and created in a js file

I am using this Cookie-Consent from github and i have the following problem:

The banner (ccb__wrapper) contains text and the buttons but i need there also a title (h1) before the Text. Is it possible to insert the tag in the cookie-consent without touching the JS-file using HTML, CSS, PHP or JS?

I tried the Solution from here

How can I write a script which help me to add H1 tag in between Div tag in html?

    const myDiv = document.getElementsByClassName('ccb__wrapper')[0];
    let title = document.createElement('h1');
    title.innerHTML = 'whatever you would like it to be';
    myDiv.appendChild(title);

with different div's but it did not work.

Update:

After looking at Sikandar Mustafa's answer, and following his thoughts, it's shown where it should.

This is the working Code:

window.onload = () => {
    const myDiv = document.getElementsByClassName('ccb__wrapper')[0];
    let title = document.createElement('h2');
    title.innerHTML = 'whatever you would like it to be';
    myDiv.prepend(title);
}

Upvotes: 1

Views: 1743

Answers (2)

FireTiger
FireTiger

Reputation: 79

I am wondering whether or not you actually need to add a new element. You can create similar effects by giving the h1 tag a class. Example:

<html>
    <head>
        <style>
            .pink {
                background-color: pink;
            }
            .hello {
                display: none;
            }
            .hello.speak {
                display: contents;
            }
        </style>
    </head>
    <body>
        <div class="pink">
            <h1 class="hello">Hello</h1>
            <h1>Push the button</h1>
            <p></p>
            <button onclick="hello()">Add</button>
            <button onclick="remHello()">Remove</button>
            <script>
                function hello() {
                    document.querySelector('.hello').classList.add('speak');
                }
                function remHello() {
                    document.querySelector('.hello').classList.remove('speak');
                }
            </script>
        </div>
    </body>
</html>

Of course, you can have other events adding this classlist, if you wish. Be sure to have a counteracting event to remove the classlist. I have found this an easy way to remove text. You can remove divs this way too, so you can remove large pieces of the website, if you wish. I have used this method before and it has proven an easy solution.

Upvotes: 0

Muhammad Sikandar Mustafa
Muhammad Sikandar Mustafa

Reputation: 56

Maybe the ccb_wrapper class element is not yet rendered, JS function works asynchronously you should add this logic somehow after the completion of the above function and you also can try preappend function.

Upvotes: 1

Related Questions