Answer to Question #302709 in HTML/JavaScript Web Application for chethan

Question #302709

DOM Manipulations

The goal of this coding exam is to quickly get you off the ground with the DOM Manipulations.

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/ce-3-1-2-dom-manipulations-op.png

HTML

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Dynamically add the

input elements in HTML container element with id interestsContainer to achieve the design.

Note

For one input use the htmlFor property to add HTML for attribute.
For other input use the setAttribute method to set the HTML attribute for.

Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="interestsContainer"></div>
    <script>
        const container = document.querySelector('#interestsContainer');

        const title = document.createElement('h1'),
              music = document.createElement('input'),
              dance = document.createElement('input'),
              musicTitle = document.createElement('label'),
              danceTitle = document.createElement('label');

        title.innerHTML = 'Choose your interests'
        container.append(title)

        music.type = 'checkbox';
        dance.setAttribute('type', 'checkbox');

        musicTitle.innerHTML = 'Music';
        danceTitle.innerHTML = 'Dance';

        container.append(music);
        container.append(musicTitle)
        container.append(dance)
        container.append(danceTitle)

    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #302709 in HTML/JavaScript Web Application for chethan

Comments

Leave a comment

Related Questions