javascript - 如果 div 位于数组内部，如何使用 JQuery 追加

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来运行应用程序。

这是一支代码笔: Pen For the source code

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