The attempt to use the 'appendChild' method on 'Node' was unsuccessful: The document allows only one element at a time to be appended

I am attempting to load an external SVG file and then add additional SVG elements on top of it. However, I am encountering an error message when I try to do so.

Error message: Failed to execute 'appendChild' on 'Node': Only one element on document allowed

This error occurs when inspecting within Chrome.

Below is the HTML code:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
  </head>
  <body>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySvg">
        <circle cx="40" cy="30" r="15" fill="#FF00FF"
          stroke="#000000" stroke-width="2" />
      </svg>
      <object data="img/drawing.svg" type="image/svg+xml"
        align="center" id="svgDrw" height="80vh"></object>
    <script type="text/javascript" src="js/problem.js"></script>
  </body>
</html>

The problem seems to be related to the JavaScript file (problem.js) included in the HTML above. The script attempts to add a rectangle element dynamically over the loaded SVG, but encounters an error in doing so.

If you have any insights or solutions to resolve this issue, please let me know. Thank you!

javascriptsvg

Answer №1

When I encountered this issue, the DOM was throwing errors because I attempted to append a child directly within the document:

document.appendChild(childElement);

To resolve it, I retrieved the body tag and appended the element there:

document.body.appendChild(newElement);

Answer №2

Understanding the distinction between the root node of a document and the document element is crucial. It's important to target the <svg> document element, as opposed to just the root node accessed through .contentDocument.

The root node exists one level above in the hierarchy. In this structure, the <svg> document element is contained within the root node, which can only have this single <svg> child.

To specifically retrieve the document element, take this approach:

svgXtraDoc = d.contentDocument.documentElement;

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

Utilizing functions as parameters and implementing a flexible number of arguments

I have two different functions: Function called 'first' which takes 1 argument Another function called 'second' that takes 2 arguments Next, there is a third function that accepts a function and a value as its parameters. I am strugg ...

javascriptfunctionarguments

The orientation of a 3D model in three.js

I couldn't find an existing three.js quadcopter model, so I decided to create a simulation of one myself. Instead of making it look like a "plus" symbol, I want it to look more like a "cross," with a rotation of either +45° or -45° latitudinally. ...

javascript3dthree.js

AngularJS Implementation for a Dynamic User Interface

After working with MS MVC and KendoUI controls for my web apps, I am now transitioning to a project that will utilize MS WebApi 2.0 for a restful pattern and a Responsive UI consisting of HTML5, Bootstrap, and AngularJS. While I have experience in writing ...

javascriptangularjstwitter-bootstrapresponsive-designcontrols

The functionality of Vue.js checkboxes is not compatible with a model that utilizes Laravel SparkForm

I've configured the checkboxes as shown below: <label v-for="service in team.services"> <input type="checkbox" v-model="form.services" :id="service.name" :value="service.id"/> </label> Although they are displayed correctly, the ...

javascriptvue.jsvuejs2laravel-spark

Apply the active class to the initial element within the dynamically generated tabs

Using jQuery, I have created these dynamic tabs. My approach involves selecting the first element, nav + tab content. HTML <div class="col-lg-12"> <div class="tabs-container"> <ul class="nav nav-tabs sys ...

javascripthtmljqueryajaxtabs

Ways to show various div elements when a checkbox is clicked

My goal is to have the div element show when I click on the checkbox and hide when I uncheck it. The code below works fine in terms of functionality. However, the issue arises when I click on both checkbox1 and checkbox2, causing the div element to overri ...

javascripthtmljquerycssbootstrap-4

Issues encountered with the functionality of the AngularJS greetController Controller

Currently exploring AngularJS, I am following a tutorial and have hit a roadblock trying to get the greetController controller to function properly. Below is the HTML code: <!DOCTYPE html> <html> <head> <title>HTML.it</titl ...

javascripthtmlangularjs

What is the best way to ensure data encapsulation (safeguarding global variables) in an

I'm currently working on an animation loop using three.js, and I've noticed that most online examples (like mrdoob, stemkoski) rely on unprotected globals at the beginning of the script. I attempted to encapsulate these in the init() function and ...

javascriptanimationthree.jsglobal-variablesclosures

A guide on efficiently inserting multiple rows containing JSON data into a MySQL database simultaneously using node.js

I'm facing an issue with inserting multiple values into columns simultaneously. Let's say I have JSON data consisting of two rows of information, and I want to insert both rows into my table at one go. My attempt looks like this: var data = [&apo ...

javascriptmysqlsqlnode.jsdatabase

Is it required for initializer functions in useState and useReducer to be pure?

Here is a problem I faced and an example of it: import ReactDOM from "react-dom/client"; import React, { useState, useEffect } from "react"; const App = () => { // Issue with initializing state const [radio, setRadio] = useState ...

javascriptreactjsreact-hooksuse-reducer

Is there a way to retrieve the id of every post on my page?

Is it possible to send multiple post ids in JavaScript? I have successfully sent the first post id, but now I need to figure out how to send each individual post id. When inspecting the elements, I see something like this: <div data-id="post_1">< ...

javascriptphpajax

Troubleshooting "jest + enzyme + react16: The src attribute of <img> tag is not sending

Currently, I am utilizing jest along with enzyme for testing my react component titled "AnimateImage". This component includes an image element within it: import * as React from 'react'; import { PureComponent } from 'react'; interfac ...

javascriptnode.jstypescript

What is the proper way to utilize the ES6 import feature when using a symbolic path to reference the source file?

I am seeking a deeper understanding of the ES6 import function and could use some assistance. The Situation Imagine that I have a portion of code in my application that is frequently used, so I organize all of it into a folder for convenience. Now, in t ...

javascripttypescriptimportecmascript-6ecma

Conceal additional recipients in the "to" address field when sending emails with Node.js using Nodemailer

I am currently working on a project called EmailSender using node.js, and I have found that the nodemailer package is incredibly helpful. However, when sending emails to multiple contacts, all recipients are able to see each other's email addresses i ...

javascriptnode.jsexpressnodemailer

Optimizing page load by only loading the javascript file once during a refresh using native methods

Is there a method to ensure that a javascript file is loaded only once when refreshing an HTML file (which contains a reference to this javascript file)? For example: <script src="js/myscript.js" type="text/javascript"></script> I wish there ...

javascripthtmltagsload

Guidelines on Implementing a Three-Level Jquery Accordion Menu

Here is a snippet of jQuery code that I am working with: $(document).ready(function(){ $("#accordion2 h3").click(function(){ //slide up all the link lists $("#accordion2 ul ul").slideUp(); //slide down the link list below the h3 clicked - only ...

javascriptjquerycssmenuaccordion

Troubleshooting Error: "Object.values method not recognized in MongoDB mapReduce"

Here is an example document from my collection: { "_id": "5a68a9308117670afc3522cd", "username": "user1", "favoriteItems": { "5a0c6711fb3aac66aafe26c6": { "_id": "5a0c6711fb3aac66aafe26c6", "name": "item1", }, "5a0c6b83fd3eb6 ...

javascriptmongodbmapreducenosql

The website no longer uses AJAX calls and does not display any errors, although it used to do so in the past

I've noticed that my website is no longer making the ajax call it used to make before I made some changes to my code. However, I can't seem to figure out what exactly I changed. The function call appears to be correct as it triggers the initial a ...

javascriptphpjqueryhtmlajax

Utilizing external directory files in electron-packager during the packaging process

I am currently in the process of packaging my electron application, which consists of two npm directories nested within each other. The inner directory contains my electron app and relies on scripts located in the outer directory. In my internal package. ...

javascriptnpmpackageelectronelectron-packager

Is it possible for me to manage events while executing Selenium tests?

Being new to Selenium, I am a JavaScript programmer interested in handling JavaScript events within my Selenium-2 tests (JUnit). Upon joining a team that already has existing tests with "waitForSomethingToBeRendered" methods, I am curious if there is a way ...

javascriptextjsselenium