如何將實例化的對象添加到DOM？ 在Vanilla JS中模擬React

Question

我正在嘗試為我的班級完成一個可選項目，過去一個月左右的時間里我們一直在使用React，而我對框架已經很滿意了。 但是，為了更好地了解事物在幕后的實際運行方式，我嘗試重新創建實例化對象的過程，並使用原始JavaScript在頁面上呈現它們。

我現在發帖是因為我碰壁了，我很難在網上找到有用的材料。

在下面的代碼中，我成功地查詢了我的輸入和一個按鈕，我想將一個對象渲染到顯示Idea類唯一實例的頁面上。 該對象帶有一些按鈕：“收藏夾”，“刪除”，“贊成”和“反對”。

到目前為止，我已經完成了什么：

1. 以DOM元素為目標並捕獲其輸入
2. 使用輸入值實例化對象並將其推入數組

我正在嘗試做的是：

1. 將ideas數組中的每個對象元素呈現到DOM
2. 能夠單擊渲染的輸出上的按鈕並更改相應對象的狀態，然后單擊時刪除正確的對象。

到目前為止，我目前編寫的邏輯是：

//buttons
const saveButton = document.querySelector(".save-button");

//inputs
const titleInput = document.querySelector("[name='title']");
const bodyInput = document.querySelector("[name='body']");

//output
const outputSection = document.querySelector(".main-outputs");

let titleValue = "";
let bodyValue = "";
const ideas = [];

titleInput.addEventListener("keyup", e => {
  titleValue = "";
  titleValue += e.target.value;
});

bodyInput.addEventListener("keyup", e => {
  bodyValue = "";
  bodyValue += e.target.value;
});

saveButton.addEventListener("click", e => {
  e.preventDefault();
  const ideaObject = new Idea(titleValue, bodyValue);
  ideas.push(ideaObject);
  console.log("ideas: ", ideas);
  render(ideaObject, outputSection);
});

const render = function(template, node) {
  if (!node) return;
  node.innerHTML += template;
};

class Idea {
  constructor(title, body) {
    this.title = title;
    this.body = body;
    this.favorite = false;
    this.quality = "swill";
    this.id = Date.now();
    this.content = this.content;
  }

  renderIdea() {}
}

每個元素“應該”在頁面上呈現的html。

        <article class="main-output-card">
          <header>
            <img src="./icons/star.svg" alt="" />
            <img src="./icons/delete.svg" alt="" />
          </header>
          <section>
            <h3 class="idea-title">Idea Title</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque
              consectetur voluptas fuga accusantium!
            </p>
          </section>
          <footer>
            <img src="./icons/upvote.svg" alt="" />
            <h5 class="idea-quality">Quality: <span>Swill</span></h5>
            <img src="./icons/downvote.svg" alt="" />
          </footer>
        </article>

任何幫助將不勝感激，這似乎是一個很大的挑戰，但我感到自己不知所措。

很想知道我該怎么做/我在做什么錯。

謝謝！

Answer 1

該代碼有很多空白。 這里有一些想法：

您似乎打算通過更改其內部html在瀏覽器中的html模板中注入一些值。 這意味着您將只能向頁面添加一個元素，因為您沒有創建新元素。
如果要顯示多個“想法”，則需要創建更多的DOM元素。

可以通過克隆要使用的節點來生成新的DOM元素。
或者，您可以使用create方法為DOM元素構造一個構造函數。

擁有DOM元素后，您可以使用各種插入方法之一將其插入頁面。

更改每個元素的一種方法是簡單地給每個ID一個ID，然后通過ID選擇每個ID並對它們執行所需的更改。

要在某個單擊事件之后刪除正確的元素，可以使用事件對象上的屬性（尤其是event.target）來查找單擊了哪個元素。

同步狀態和DOM的啟發式方法將由您自己決定。

Answer 2

因此，如果您想從頭開始渲染整個內容（我想是的），那么您可以這樣做。 都是純JavaScript，沒有JQuery或類似的東西。

有一件非常重要的事情要記住。 就像React，Vue等一樣，如果用戶在瀏覽器中禁用了JavaScript，則在打開頁面時他們將看不到任何內容。

/* your other existing functions */

const createImg = function(src, alt) {
  let img = document.createElement('img');
  img.setAttribute('src', src);
  img.setAttribute('alt', alt);

  return img;
}

const createTextElement = function (type, text, className) {
  let el = document.createElement(type);
  el.innerText = text;
  if (className) el.className = className;
}

class Idea {
  constructor(title, body) {
    this.title = title;
    this.body = body;
    this.favorite = false;
    this.quality = "swill";
    this.id = Date.now();
    this.content = this.content;
  }

  renderIdea() {
    // Create the main container
    let article = document.createElement('article');
    article.className = 'main-output-card';

    // Create the header container and add the icons to it
    let articleHeader = document.createElement('header');
    articleHeader.appendChild(createImg('./icons/star.svg', ''));
    articleHeader.appendChild(createImg('./icons/delete.svg', ''));

    // Create the content section and add the content to it
    let articleSection = document.createElement('section');
    articleSection.appendChild(createTextElement('h3', this.title, 'idea-title'));
    articleSection.appendChild(createTextElement('p', this.body));

    // Create the article footer and add content to it
    articleFooter = document.createElement('footer');

    let articleFooterQuality = document.createElement('h5');
    articleFooterQuality.className = 'idea-quality';
    articleFooterQuality.innerHtml = `Quality: <span>${this.quality}</span>`;

    articleFooter.appendChild(createImg('./icons/upvote.svg', ''));
    articleFooter.appendChild(articleFooterQuality);
    articleFooter.appendChild(createImg('./icons/downvote.svg', ''));
  }
}