Javascript 用函数替换整个DIV

我试图用html启动一个div区域，然后用新的html替换该html。我目前正在尝试使用一个函数来简化html的创建

这是我的函数，它根据行、列和字符的输入创建一个表

function drawArt (x, y, char){
    $( "#artArea").append("<table>");

    indexY = 0;

    while (indexY < y)
    {
        $( "#artArea").append("<tr>");
        var indexX = 0;
        while (indexX < x)
        {
            $( "#artArea").append("<td class=tableCell>" + char + "</td>");
            indexX++;
        }
        $( "#artArea").append("</tr>");
        indexY++;
    }
    $( "#artArea").append("</table>")
};

所以，正如下面所建议的，将“replaceWith”改为“empty”修复了我的问题。然而，它破坏了我程序的另一部分。我应该能够单击任何字符并使其更改为输入的任何字符，而无需更改整个表，因此：

$( ".tableCell" ).click(function(){
charGlobal = $("#drawChar").val();
$(this).text(charGlobal)
})

---

我的程序的哪个部分失败了？

最大的问题是您正在创建无效的html。您总是附加到

#artArea

表中，因此您的标记将以

<table>
<tr></tr>
<td></td>
<td></td>
... etc
</table>

然后

$( "#genNew" ).click(function(){

    var xGlobal = $("#numCols").val();
    var yGlobal = $("#numRows").val();
    var charGlobal = $("#drawChar").val();

    $( "#artArea" ).html(drawArt (xGlobal, yGlobal, charGlobal));    
})

工作示例：

---

在用新的要求更新了问题之后，我也应该解决这个问题。

click

事件处理程序无法处理表格单元格的原因是

click

仅影响页面加载时页面上的元素。如果动态添加新元素（如上所述），则需要将事件委托给页面加载时确实存在的元素。在这种情况下，我们可以使用

artArea

。注意您想要的是

.html

而不是

.text

$( "#artArea" ).on('click','.tableCell', function(){
    charGlobal = $("#drawChar").val();
    $(this).html(charGlobal);
});

---

实例：

您可以用新的html替换html

这是js代码：

$("#start").click(function() {
  var x = $("#rows").val(),
      y = $("#columns").val(),
      charx = $("#char").val();
//getting teh no of columns, rows and the character

  $("#container").html("");
//empty the container first

 var table = document.createElement("table");
 for (var i = 0; i < x; i++) {
    var tr = document.createElement("tr");
    for (var j = 0; j < y; j++) {
       var td = document.createElement("td");
       td.innerHTML = charx;
       tr.appendChild(td);
    }
    table.appendChild(tr);
 }
//creating the table based on the values

 $("#container").append(table);
//appending inside the container

});

$（“#开始”）。单击（函数（）{
var x=$（“#行”）.val（），
y=$（“#列”）.val（），
charx=$（“#char”）.val（）；
//获取列数、行数和字符数
$（“#容器”）.html（“”）；
//先清空容器
var table=document.createElement（“表”）；
对于（变量i=0；i

这是你的电话号码

---

希望对你有用：）

你能加把小提琴吗？我想我不明白。请您解释一下好吗？

$（“#artArea”）.replaceWith（）

到

$（“#艺术区”）.empty（）

。或者，更改第一个

$（“#艺术区”）。追加（“”）至
$（“#艺术区”）.html（“”）。或者，在一个字符串中构建整个html，并在最后生成一个
.html（str）
。为什么要混合使用jQuery和vanilla javascript？对于一个没有经验的开发人员来说，这太令人困惑了！为什么混合使用jquery和javascript DOM操作？为什么不直接使用jquery呢？出于某种原因，这对我不起作用。我甚至尝试直接用您的工作示例替换我的代码，但它在单击按钮后不会重新绘制表。查看我的完整代码会有帮助吗？@joey-sides-这是因为您已经用表完全替换了
artArea
div（这就是
replaceway
所做的）。如果您只想在
artArea
中插入新表格，请使用
.html
代替
.replaceWith
例如，将“.replaceWith”更改为“.html”现在允许我调整表格艺术的大小，但现在阻止我单击单个单元格来更改其内容。有什么建议吗？查看原始帖子编辑示例代码。没有看到您更新了问题，我将更新答案以回答该问题。请参阅“立即更新”。
$( "#artArea" ).on('click','.tableCell', function(){
    charGlobal = $("#drawChar").val();
    $(this).html(charGlobal);
});

$("#start").click(function() {
  var x = $("#rows").val(),
      y = $("#columns").val(),
      charx = $("#char").val();
//getting teh no of columns, rows and the character

  $("#container").html("");
//empty the container first

 var table = document.createElement("table");
 for (var i = 0; i < x; i++) {
    var tr = document.createElement("tr");
    for (var j = 0; j < y; j++) {
       var td = document.createElement("td");
       td.innerHTML = charx;
       tr.appendChild(td);
    }
    table.appendChild(tr);
 }
//creating the table based on the values

 $("#container").append(table);
//appending inside the container

});