javascript - 从列表中选择新选项时，它会替换以前的元素

Question

现在选择一个选项时，它将被添加到DOM，然后选择另一个选项时，它将继续添加所选的选项。

I would like it so that whenever a option is selected that is the only thing that will show. 不要添加元素，只需在选择新元素时替换它们。

    //Function to add Elements
    function myFunction() {
    var x = document.getElementById("mySelect").value;
if(x == "format_text"){
    document.getElementById("container").innerHTML += 
  '<div id="block"><h2>Formatted Text</h2><textarea style="width:100%; height: 300px;"></textarea><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect m-t-20">Remove Block</button></div></div>'
    } else if (x == "rightImg_leftTxt"){
    document.getElementById("container").innerHTML += 
  '<div id="block"><h2>Right Image Left Text</h2><div class="row" id="container"><div class="col-md-6"><input type="file" accept="image/*" onchange="preview_image(event)"><img id="output_image"/></div><div class="col-md-6"><textarea style="width:100%; height: 300px;"></textarea></div></div><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect m-t-20">Remove Block</button></div>'
    } 
else if (x == "leftImg_rightTxt"){
    document.getElementById("container").innerHTML += 
  '<div id="block"><h2>Left Image Right Text</h2><div class="row" id="container"><div class="col-md-6"><textarea style="width:100%; height: 300px;"></textarea></div><div class="col-md-6"><input type="file" accept="image/*" onchange="preview_image(event)"><img id="output_image"/></div></div><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect m-t-20">Remove Block</button></div>'
    } 
}
//Function For image Preview
function preview_image(event) 
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image');
  output.src = reader.result;
 }
 reader.readAsDataURL(event.target.files[0]);
}
//Delete button Function
function Delete(button)
    {
        var elem = document.getElementById("block");
        elem.parentNode.removeChild(elem);
        event.preventDefault();
	}

                                <div class="form-group col-md-9">
                                    <div class="btn-group bootstrap-select form-control show-tick">
                                        <select id="mySelect" class="form-control show-tick" name="assignee_token" tabindex="-98" onchange="myFunction()" required>
                                            <option value="0">Choose Block Type</option>
                                            <option value="format_text">Formatted Text</option>
                                            <option value="rightImg_leftTxt"> Right Image, Left Text</option>
                                            < <option value="leftImg_rightTxt"> Left Image, Right Text</option>

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="body">
                                <textarea name="body" class="summernote" id="contents" title="Contents">
                                </textarea>
                                <button type="submit" class="btn btn-info waves-effect m-t-20">Create</button>
                            </div>
                        </div>
                        <div class="card">
                            <div class="body">
                                <div id="container" class="container">
                                    <!-- <div id="container">
                            </div>    -->
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

标签： javascripthtmlreplace

Answer 1

这是因为您正在使用+=indocument.getElementById("container").innerHTML += 那不断向已经存在的内容添加内容。