Unfortunately, createElement is not functioning as expected

There seems to be an issue with my code as the div containing an anchor tag with an image does not appear in the section area when I execute this function

function addLink(){

  if(localStorage.getItem('howManyLinks') >= 1){
    localStorage.setItem('howManyLinks', Number(localStorage.getItem('howManyLinks')) + 1);
  }
  else{
    localStorage.setItem('howManyLinks', '1');
  }

  var howManyLinks = localStorage.getItem('howManyLinks');

  var myNewLink = document.getElementById("link");
    localStorage.setItem('link'+howManyLinks, myNewLink.value);

  var myNewIcon = document.getElementById("icon");
    localStorage.setItem('icon'+howManyLinks, myNewIcon.value);

/* The problem lies below */

  var div = document.createElement('div');
  var img = document.createElement('img');
  var a = document.createElement('a');

  img.setAttribute('src','icon'+howManyLinks);
  a.setAttribute('href','link'+howManyLinks);

  section.appendChild(div);
  div.appendChild(a);
  a.appendChild(img);
}

Answer №1

If you need to focus on a specific issue, follow these steps for Firefox 25.0 / Linux:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <section id="section">
    </section>
    <script type="text/javascript">
        var div = document.createElement('div');
        var img = document.createElement('img');
        var a = document.createElement('a');
        var section = document.getElementById("section");

        img.setAttribute('src', 'dummyImg2.jpg');
        a.setAttribute('href', 'http://www.example.com');

        section.appendChild(div);
        div.appendChild(a);
        a.appendChild(img);
    </script>
</body>
</html>

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

Can anyone provide guidance on shifting the IconButton to the right side of the Tab?

I have an AppBar with a tab and an IconButton. I'm trying to position the IconButton on the right side using float: right, but it doesn't seem to work. This is how it currently looks: https://i.sstatic.net/yyf32.png I also created a code sandbo ...

Alert event in JavaScript navigating between different pages

My website features two dynamic php pages: customer invoices and customer management. One common request from my users is the ability to swiftly add a new customer directly from the customer invoices page. Instead of cluttering the customer invoices page ...

Converting HTML tables into arrays

I have JSON content that needs to be transformed into an array, specifically from a HTML table with cell values. Those cells should be combined into a single array for further use in the project. Struggling with the conversion of cell values into an arra ...

Output Scalable Vector Graphics (SVG) content on a webpage

I need to include an SVG element in my Angular 2+ code. My goal is to provide users with the option to print the SVG element as it appears on the screen. <div class="floor-plan" id="printSectionId2" (drop)="onDrop($event)" (dragover)="onDragOver ...

Guide to implementing a click-triggered notification using JavaScript

Can anyone assist me with a JavaScript issue regarding applying toast notifications? I need guidance on implementing an onClick toast using JavaScript. The toast should only appear when a specific condition is false; if the condition is true, the page sho ...

Utilizing LocalStorage for storing the most recent input value

Is there a way to set and retrieve the last input value using JavaScript or jQuery? I want to implement an onkeydown function for an input field that updates the input value, and then each time the page is loaded, that value is displayed. <input type ...

Using the map function with a React onClick handler

After tirelessly scouring the internet for answers to my query, I've hit a dead end. My goal is to implement a basic react click handler on my button, but for some reason, it just won't cooperate. It's likely something incredibly straightfor ...

JavaScript in Internet Explorer is showing an error message stating that it is unable to access the property '0' of an undefined or null

JavaScript Code function update() { var newAmt = 0; var newtable = document.getElementById("tbl"); for ( var i = 0; i < newtable.rows.length; i++) { innerTable = newtable.rows[i].cells[0].childNodes[0]; if ( (innerT ...

Navigating through the settings menu by using a web browser

Can device settings be accessed from a mobile browser using HTML5 and JavaScript? I am attempting to replicate a feature found in Android, where you can launch an intent to display a specific settings page using code like the example below. Intent intent ...

Assign a class to the list item that has a designated ID

I am attempting to assign a class to a specific li element based on its id. Below is the code I have tried: function updateIndex(indexValue){ $('li[id=' + indexValue + ']').addClass("selectedQuestion") } However, I seem to be enco ...

Is there a JQuery slider that includes text animation and automatic playback?

I am looking to incorporate a slider with automatic play on my school website. I specifically want static images with smooth transitions and text effects similar to what is showcased in this Text Effect example. Can anyone recommend a plugin that can achie ...

"Trouble with Angular's http.get method failing to retrieve data from MySQL through Node

I am struggling to retrieve data from MySQL using Angular and Node.js. Despite trying, I am unable to make it work. When I check Postman using the link http://localhost:8080/locations, I can see the data. { "status": "200", "items": [ { "cit ...

Data from Firebase persists even after removal

Currently utilizing firebase for my project, where each user object includes their list of favorites. The structure is illustrated below: https://i.sstatic.net/vm6w8.png In the favorites object shown, there was initially two records, but one was manually ...

After ajax, trigger change event

Can anyone assist me in combining multiple functions within the same form using AJAX? The purpose of the form is to prenote a new "meeting" and it consists of an input for the date and a select dropdown for choosing the operator. FORM CODE: <div id=&qu ...

Begin a fresh HTML page using an Express server

On my login page, I have 2 buttons. When the register button is clicked, I want a new HTML page (register.html) to open. All files are in the same folder. Here's what I've tried so far: My index.html file (main page): <!DOCTYPE html> < ...

Setting up Webpack for my typescript React project using Webpack Version 4.39.2

I have been given the task of fixing the Webpack build in a project that I am currently working on. Despite not being an expert in Webpack, I am facing difficulties trying to make it work. The project has an unconventional react frontend with typescript. I ...

Utilizing JavaScript to send emails from HTML without relying on the default Outlook client

Is it possible to send an email using JavaScript without relying on Outlook or the mailto object? I'm looking for a direct method that can submit form data directly to an email address. Does anyone know of a way to achieve this with JavaScript? ...

Utilizing a self-invoking function to incorporate JavaScript

In my role, I am responsible for managing a Content Management System (CMS) used by developers to create content that involves JavaScript. In the past, we placed the content in an iFrame for containment purposes; now, it operates as a single-page client-si ...

Tips for steering clear of callback chaos following a single AJAX request

My nodeJS application retrieves data from an API once and then performs various processing tasks using separate functions. However, due to the asynchronous nature of AJAX, I am currently utilizing async.series to handle the flow of operations: async.serie ...

Invoking a function passed via props that utilizes react-router's features

I'm really struggling to grasp this problem. Is there anyone here who could help me out? I have a component where I pass a method called this.fetchContent as props named Filter. This method triggers an action creator that uses axios with Redux to fetc ...