Experiencing a problem with generating nested elements using JavaScript

I'm looking to customize the default header of a div using a JavaScript function, but the final result of my code is displaying as [object HTMLDivElement]. Here's the code snippet I'm working with:

    function CustomizeHeader(){
        var div=document.createElement('div');
        var logo = document.createElement('img');
        logo.height=80;
        logo.width=250;
        logo.src="persona-5-listing-thumb-01-ps4-us-30jun16.png";
        var dataContainer= document.createElement('div');
        var taxID = document.createElement('span');
        var address = document.createElement('span');
        var phone = document.createElement('span');
        taxID.innerHTML = "Tax ID: ";
        address.innerHTML = "Sample Address";
        phone.innerHTML = "Phone Number: ";
        dataContainer.appendChild(taxID);
        dataContainer.appendChild(address);
        dataContainer.appendChild(phone);
        var subDocument=document.createElement('div');
        subDocument.border="2px solid "+colorBorder;
        var rD = document.createElement('span');
        rD.innerHTML="tax ID";
        var tD = document.createElement('p');
        tD.innerHTML = "HEADER";
        subDocument.appendChild(rD);
        subDocument.appendChild(tD);
        div.appendChild(logo);
        div.appendChild(dataContainer);
        div.appendChild(subDocument);
        document.getElementById('header').innerHTML = div;
    }

Answer №1

div.innerHTML = logo + datos + div;
is where the issue lies

1) You cannot concatenate HTML elements 2) Instead of + div, it should be + doc

function Modelo1(){
        var div=document.createElement('div');
        var logo = document.createElement('img');
        logo.height=80;
        logo.width=250;
        logo.src="persona-5-listing-thumb-01-ps4-us-30jun16.png";
        var datos= document.createElement('div');
        var ruc = document.createElement('span');
        var dir = document.createElement('span');
        var tel = document.createElement('span');
        ruc.innerHTML = "RUC: ";
        dir.innerHTML = "dirección aca";
        tel.innerHTML = "Telefono: ";
        datos.appendChild(ruc);
        datos.appendChild(dir);
        datos.appendChild(tel);
        var doc=document.createElement('div');
        doc.border="2px solid black";
        var rD = document.createElement('span');
        rD.innerHTML="ruc";
        var tD = document.createElement('p');
        tD.innerHTML = "HEADER";
        doc.appendChild(rD);
        doc.appendChild(tD);
        div.appendChild(logo)
        div.appendChild(datos)
        div.appendChild(doc)
        document.getElementById('cabecera').appendChild(div);
    }
    
    Modelo1()
<header id="cabecera"></headert>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The for loop is not receiving any values

This is puzzling me a bit. I am facing an issue with two functions in my code: 1) var revisionNumber; var $list = $('<ul>'); TFS_Wit_WebApi.getClient().getWorkItem(284) .then(function(query) { revisionNumber = query.rev; ...

What could be causing the data toggle feature in my navbar to not work on Bootstrap?

Here is a code snippet to create a simple collapsible navbar with Bootstrap 5 that includes a logout button. However, the data toggle feature for the logout button doesn't seem to work when clicked. Any suggestions on how to fix this? <!DOCTYPE ...

Is it feasible to maintain a persistent login session in Firebase without utilizing the firebase-admin package through the use of session cookies?

Currently, I am integrating Firebase into my next.js application for user login functionality. The issue I am facing is that users are getting logged out every time they switch paths within the site. Even though their session cookie has not expired, if the ...

Complete the JQuery code by closing the div and ul tags, then proceed to open a

Need help with structuring HTML <div class="content"> <p>Lorem ipsum dolor sit amet</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <span>Dolor set amet conse ...

Transforming HTML Code in a PHP Document to a PDF Document

I have a PHP file that interacts with a database to update the HTML content. There is a button on the page labeled "Export As PDF". I attempted to convert the page to a PDF using HTML2FPDF, but encountered this error message: FPDF error: Unable to create ...

Issue with Sub-Menu closing unexpectedly upon hovering over Menu item

I created a webpage with navigation links that trigger separate menus to open upon hovering. Although I have successfully implemented this functionality, I encounter an issue when trying to click on a link within the sub-menu as it disappears. Below is a ...

Move the div from side to side when clicked

My mobile navigation bar currently has overflow, requiring users to scroll left or right to see all the choices. I want to implement buttons with arrows that will automatically slide the navigation bar to the desired direction when clicked. I have attempt ...

Mastering the art of updating objects with React's useState() function

Having trouble updating my state using useState(). Whenever the alert pops up, it shows the initial value of my state. Below is a sample code snippet. I expect that when I click the Save button, setData should update data with the new form values, then di ...

Send data to a JavaScript file

Even though this particular question has been asked and answered multiple times, I am still struggling to find a solution to my problem. I am currently working with Masterpages and JavaScript files, and as many people are aware, Masterpages can be quite t ...

What could be causing my submit button to fail to send form data? - Issues with HTML/Node

Currently, I have a straightforward form set up for individuals to sign up for a waiting list for my product. However, I'm encountering an issue where the form is not submitting. The application is running smoothly on localhost:3000. The page loads c ...

Building an accordion collapse feature in HTML using CSS and JavaScript

I've been working on creating an accordion interface, but I'm facing an issue where only the first collapsible button works properly. The rest of the buttons are not functioning and don't even appear on the page. When I remove the CSS styli ...

HTML is appearing as unformatted text on the screen

I am utilizing deta for rendering cloud-based HTML content. Below is the code snippet in use: from deta import Deta from fastapi import FastAPI, Request, Response, Form, File, UploadFile from fastapi.templating import Jinja2Templates from fastapi.response ...

Restricting the quantity of rows displayed on a webpage

I recently created a Django-based SaaS application. When searching, the web page loads over a thousand rows from the database. I am looking to limit the number of rows displayed on each page - for example, if there are more than 100 rows, I want them to be ...

Adjusting the Global Position of a Child Element in Three.js

Is it possible to manipulate the global position of a child object in Three.js? My main objective is to: 1) Unlink the child from its parent (without changing its location) 2) Move the parent to a different position 3) Reconnect the child (without al ...

I'm having trouble getting my login page centered when using Semantic UI

Currently, I am working on creating a login page using Semantic UI. However, I am facing an issue where the column is not aligning to the center as intended; instead, it is occupying the entire page. I have attempted to link all the necessary files in the ...

Leverage jQuery to Retrieve Text and Modify

My Content Management System automatically generates a time stamp for when a page was last updated. However, the format it provides is not ideal for my needs. I would like the date to be displayed in the US Standard way - May 24, 2013, without including th ...

Removing an Element in a List Using Jquery

In my JQuery, there is a list named additionalInfo which gets populated using the function below: $('#append').on('click', function () { //validate the area first before proceeding to add information var text = $('#new-email&a ...

Is there a way to select multiple elements with the same class using getElementByClassName instead of only obtaining the first element with that class designation?

I recently started learning JavaScript, and I'm still struggling to grasp many concepts. I'm currently working on styling buttons on my website to match the existing ones, but I'm unable to edit the plugin's HTML directly. I was able to ...

Is it possible to accomplish the following behavior when arranging an array of strings?

My array is structured as follows: let arr = ['A1.1', 'A1.3', 'A1.2', 'A1.1 (2)', 'A1.3 (2)', 'A1.2 (2)', 'A1.1 (3)', 'A1.3 (3)', 'A1.2 (3)'] After using the sort() ...

Tips for refreshing the table data following the deletion of a record within an AJAX success function

Here is the code I'm currently dealing with: While my overall code is functioning properly, I am encountering an issue with the success function of my Ajax. Specifically, I am trying to display the updated record after deleting a row without needing ...