Описание: Попытка добавить элемент в группу JavaScript TypeeError: аргумент 1 Node.appendChild не является объектом. " Несмотря на то, что я проверил, используя тип того, что это объект.

let d = SVG('board').size(100, 100);

function createElem(elemId) {
  let elem;
  elem = d.rect().attr({
    id: elemId
  });
  return elem;
};

function main() {
  'use strict';
  let elem, elemId, s;

  elemId = `elem101`;
  elem = createElem(elemId);
  alert(elem); // Returns ‘elem101’ although elem is an object. --A
  s = d.group();
  s.add(elem); // Appears to work fine up to this point

  // However, replacing the previous line with the following
  // three lines of code causes an error
  elem = document.getElementById(elemId);
  alert(elem); // returns ‘[object SVGRectElemnt]’; Why? -- B
  // In A, the alert returns the element id of ‘elem101’
  // but here in B it returns the rectangle object.
  // Why this difference?
  try {
    s.add(elem); // Causes error: “TypeError: Argument 1 of
    // Node.appendChild is not an object.”
    // I am unable to add the element returned by getElementById
    // to the group.
  } catch (e) {
    console.log(e.message);
  }
};

main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>

<div id='board'></div>

Добавление фрагмента кода в организм

0
Learner 3 Окт 2019 в 15:54

1 ответ

Лучший ответ

Похоже, {add ожидает объекта SVG.JS, а не дом Узел. Вы можете получить объект SVG.js из узла DOM с использованием instance свойство.

Вот тот же фрагмент, теперь использующий elem.instance, который не бросает ошибку. Тем не менее, это не добавит один и тот же элемент дважды, поэтому он не делает много ...

Если вы хотите получить объект SVG.JS по ID, вы можете использовать {{{{{ X0}} Метод Чтобы получить элемент

let d = SVG('board').size(100, 100);

function createElem(elemId) {
  let elem;
  elem = d.rect().attr({
    id: elemId
  });
  return elem;
};

function main() {
  'use strict';
  let elem, elemId, s;

  elemId = `elem101`;
  elem = createElem(elemId);
  alert(elem);
  // Returns ‘elem101’ although elem is an object.
  // Apparently SVG.js overrides the toString() method of their objects to
  // return the id property if present.
  s = d.group();
  s.add(elem); // Appears to work fine up to this point

  elem = document.getElementById(elemId);
  alert(elem); // returns ‘[object SVGRectElemnt]’; Why? 
  // Since you're using DOM methods, it's retrieving a DOM object.
  // To get the SVG.js object, use an SVG.js method
  // elem = SVG.get(elemId);

  try {
    s.add(elem.instance); // does nothing because of the add() call above 
  } catch (e) {
    console.log(e.message);
  }
  // OR
  try {
    s.add(SVG.get(elemId)); // does nothing because of the add() call above
  } catch (e) {
    console.log(e.message);
  }
};

main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>

<div id='board'></div>
1
Heretic Monkey 3 Окт 2019 в 19:13