Как добавить, используя JQuery, если div находится внутри массива

Question

У меня есть div внутри массива, который я хочу добавить. Как это сделать, используя JQuery?

Вот код:

import React, { Compoenent } from "react";
import "./styles.css";
import $ from "jquery";
const CircularJSON = require("circular-json");

export default class App extends React.Component {
  componentDidMount() {
    $(`<div className="bulkclass top" />`).appendTo(".innerDiv");
    alert(CircularJSON.stringify($(".outerDiv")));
  }

  constructor(props) {
    super(props);
    this.state = {
      content: [
        <div className="outerDiv">
          <div className="innerDiv" />
        </div>
      ]
    };
  }

  render() {
    return (
      <div>
        {this.state.content.map((item, index) => {
          return item;
        })}
      </div>
    );
  }
}

Я использую reactjs для запуска приложения.

Вот код ручки: Ручка для исходного кода

Answer 1

В jQuery вы по-разному добавляете имя класса. Вы должны использовать объект в качестве второго параметра и использовать ключ class для имен классов.

Другой способ - использовать .addClass(...) метод элемента.

Попробуйте следующим образом:

$("<div/>", { "class": "bulkclass top" }).appendTo(".innerDiv");

ОБНОВЛЕНИЕ:

import React, { Component } from "react";
import "./styles.css";
import $ from "jquery";
const CircularJSON = require("circular-json");

export default class App extends Component {
  componentDidMount() {
    const divToAppend = $("<div/>", { class: "bulkclass" });
    divToAppend.html("WORKING PROOF");
    divToAppend.appendTo(".innerDiv");

    alert(CircularJSON.stringify($(".outerDiv")));
  }

  constructor(props) {
    super(props);

    this.state = {
      content: [
        <div className="outerDiv">
          <p>HELLO</p>
          <div className="innerDiv">TEST</div>
        </div>
      ]
    };

    console.log(this.state);
  }

  render() {
    return (
      <div>
        {this.state.content.map((item, index) => {
          return item;
        })}
      </div>
    );
  }
}

Вот ручка: https://codesandbox.io/s/modest-hooks-td76u