如何将使用数据细节的按钮添加到javascript生成的字符串中_Javascript

如何将使用数据细节的按钮添加到javascript生成的字符串中

javascript

如何将使用数据细节的按钮添加到javascript生成的字符串中,javascript,Javascript,我正在使用下面的代码创建包含信息字符串的不同部分，它们显示在我的屏幕上。现在，我想为每个部分添加一个按钮，该部分使用数据详细信息在按钮中存储名称和价格。我尝试使用数据详细信息在字符串中添加一个按钮，但由于必须使用不同的按钮，这使得字符串不完整，无法完成代码 function display(results) { article = document.getElementById("homeArticle"); var html = ''; for (var i = 0;

我正在使用下面的代码创建包含信息字符串的不同部分，它们显示在我的屏幕上。现在，我想为每个部分添加一个按钮，该部分使用数据详细信息在按钮中存储名称和价格。我尝试使用数据详细信息在字符串中添加一个按钮，但由于必须使用不同的按钮，这使得字符串不完整，无法完成代码

function display(results) {
    article = document.getElementById("homeArticle");
    var html = '';
    for (var i = 0; i < results.length; i++){ 
        var item = results[i];

        var name = item.P_NAME;
        var description = item.P_DESCRIPTION;
        var price = item.P_PRICE;
        var quant = item.P_QUANTITY;
            // next I add to the string that we want to place on the page
        html += '<section id="homePageSection"> <p>Name: ' + name + '</p><p>Description: ' + description + '</p><p>Price: £' + price + '</p><p>Quantity: ' + quant + '</p></section>';

        var button = document.createElement("button");
        button.dataset.detail = JSON.stringify(name);
        button.innerHTML = "Add To Basket"

        var section = document.getElementById("homePageSection");

    };
    article.innerHTML = html;
}


function getItems() {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var results = JSON.parse(this.responseText);
        display(results.rows);
    };
    xhr.open("GET", "displayData.php");
    xhr.send();
}

window.addEventListener("load", getItems);

但是，我不太了解这是如何工作的，需要帮助指出正确的方向，您是否可以仅使用数据细节来完成这项工作，还是需要使用document.createElement和appendChild代码

html页面为：

<body>

<article id="homeArticle">
</article>

<script src="homeDisplay.js"></script>
</body>

我的答案是在jquery中，假设您有一个名为container的div

然后尝试下面的代码

// under the event , like button click
    var your_dynamic_value = 'xyz';
    $("#container").append('<input type="submit" value="'+your_dynamic_value+'">');

希望它能有所帮助……

这是一个很好的例子：

这就是答案：

var button = document.createElement("button");
button.dataset.detail = JSON.stringify(name);
button.innerHTML = "Add To Basket"

document.getElementById("homePageSection").appendChild(btn);

我在控制台中收到一条错误消息，说Uncaught TypeError:无法读取Null的属性'appendChild'，这是因为您没有id为homePageSection的元素-显示您的html，或者更好-创建fiddle with示例，我在fiddle@thomasokay中解决了这个问题，因为这是家庭作业，我将尝试在fiddle中解决它，如果我以后有问题，我会再次尝试和评论。谢谢你的帮助@Legendary我的意思是-在fiddle中创建你的html示例，我编写js代码：D@thomasokay会的，我的html非常简单，它只是一篇emtpy文章，在这里，

var button = document.createElement("button");
button.dataset.detail = JSON.stringify(name);
button.innerHTML = "Add To Basket"

document.getElementById("homePageSection").appendChild(btn);