使用 Javascript 动态复制 HTML DIV

问题描述

我使用 HTML、Java、AJAX 和 Heavy Javascript 从数据库中提取记录，并根据用户搜索参数在页面上动态显示它们.非常基本的概念......我的问题不一定是我如何使这项工作?"输入问题，因为我已经设置好一切的方式，它工作得很好.然而，我确实相信必须有一种更简洁的方法来创建更易于维护的代码.我的主要目标是能够将我的网页的设计方面与 Javascript 完全分开，以便网页设计师根本不必接触 Javascript 来更改所呈现数据的外观.让我首先向您展示我目前如何设置.

I am using HTML, Java, AJAX, and Heavy Javascript to pull records out of a database and display them dynamically on a page based on the users search parameters. Pretty basic concept...My question isn't necessarily a "How do I make this work?" type question because the way i've got everything set up, it works just fine. I do however believe there must be a slightly cleaner approach that would create more maintainable code. My main goal is to be able to completely separate the design aspects of my web page from the Javascript so that a web designer would not have to touch the Javascript at all in order to make changes to the appearance of the data presented. Let me begin by showing you how I currently have things set up.

在 HTML 页面上，我只是使用容器 DIV 作为占位符，因此我可以在某个地方插入从 Javascript 动态创建的 DIV.否则，根据 HTML，该容器 DIV 是完全空的.

On the HTML page, I am simply using a container DIV as a placeholder so I have somewhere to insert the dynamically created DIVs from Javascript. Otherwise, that container DIV is completely empty according to the HTML.

现在，深入研究 Javascript.当我从数据库中提取记录时，我使用 for 循环来构建一个包含我希望显示的所有数据的 DIV.然后使用 for 循环，我只需将 DIV 附加到每个记录的 HTML 容器 DIV 中:

Now, diving into the Javascript. When I pull records from the database, I use a for loop to build a DIV containing all the data I wish to display. Then using the for loop I simply append the DIV into the HTML container DIV for each record:

function getPhoneNumbers() {
    var length = contact.phone.length;

    if(length > 0) {
        //Remove any previous numbers.
        var container = document.getElementById('popupPhoneNumbers');
        clearAllChildNodes(container);

        for(var i=0; i<length; i++) {
            container.appendChild(new phoneNumberRow(i, contact.phone[i]));
        }
    }
}

function phoneNumberRow(id, phoneNumber) {
var rowDiv = document.createElement('div');
rowDiv.id = 'popup-phone-number-' + id;
rowDiv.setAttribute('onmouseover', 'toggleEditPhone(' + id + ');');
rowDiv.setAttribute('onmouseout', 'toggleEditPhone(' + id + ');');

//Set primary class.
var primaryClass = 'primary-off';

if(phoneNumber.isPrimary) {
    primaryClass = 'primary-on';
}

//Primary button display
var primaryContainer = document.createElement('div');
primaryContainer.id = rowDiv.id + '-primary';
primaryContainer.setAttribute('class', primaryClass);
primaryContainer.style.display = 'inline';
var primaryButton = document.createElement('a');
primaryButton.setAttribute('onclick', 'PhoneUtility.setPrimary(' + id + ');');
primaryButton.innerHTML = 'P';
primaryContainer.appendChild(primaryButton);

//Phone number display
var phoneNumberRow = document.createElement('div');
phoneNumberRow.style.display = 'inline';
phoneNumberRow.innerHTML = phoneNumber.type + ' ' + phoneNumber.number;

//Edit buttons display
var editButtonsContainer = document.createElement('div');
editButtonsContainer.id = rowDiv.id + '-edit';
editButtonsContainer.style.display = 'none';
var editButton = document.createElement('a');
editButton.setAttribute('onclick', 'PhoneUtility.edit(' + id + ');');
editButton.innerHTML = 'Edit';
editButtonsContainer.appendChild(editButton);
var deleteButton = document.createElement('a');
deleteButton.setAttribute('onclick', 'PhoneUtility.remove(' + id + ');');
deleteButton.innerHTML = 'Delete';
editButtonsContainer.appendChild(deleteButton);

//Append all children to container.
rowDiv.appendChild(primaryContainer);
rowDiv.appendChild(phoneNumberRow);
rowDiv.appendChild(editButtonsContainer);

return rowDiv;
}

正如你所看到的，我在我的 Javascript 中做了很多 HTML 标签构建，效果很好，但是如果没有 Javascript 经验的设计师不得不操作这些数据，那将是一种非常悲惨的体验.更不用说，我更希望设计师甚至不必打开我的 JS 文件.

As you can see I am doing a lot of HTML tag building in my Javascript, which works just fine, but if a designer with no Javascript experience had to manipulate this data, it would be a pretty miserable experience. Not to mention, i'd prefer for a designer to not even have to open up my JS files.

我想采用的方法是在 HTML 中创建所有容器 DIV，然后使用 Javascript 简单地将数据插入到这些元素中，而不必创建它们.这样，CSS 样式就可以独立于 Javascript 应用于每个 DIV.但是，如果我在 HTML 中创建一行 DIV，我该如何为要显示的每条记录复制该行?有什么方法可以简单地将预先设计的元素复制到 Javascript 中，填写数据并根据需要为我要显示的每条记录重复该行吗?

The approach i'd like to take, is to create all the container DIVs in the HTML and then use Javascript simply to insert the data into those elements, rather than have to create them. That way CSS styling can be applied to each DIV separately from the Javascript. But if I create one row of DIVs in the HTML, how do I go about duplicating the row for each record that I want to display? Is there some way to simply copy the pre-designed element into Javascript, fill in the data and repeat that row as necessary for each record I want to display?

推荐答案

您在这里似乎没有使用 javascript 库.如果您使用 jQuery，您可以简单地使用 clone 来制作元素的深层副本.克隆文档

It doesn't look like you're using a javascript library here. If you were using jQuery you could simply use clone to make a deep copy of an element. Clone Docs

否则您需要使用 cloneNode 方法.它也进行深度复制.

Otherwise you need to use the cloneNode method. It does a deep copy too.

我的做法是在纯 html/css 中创建一次元素，让您的设计师根据需要对其进行样式设置，然后简单地向其中添加一个 .hidden 类.给它一个像 #rootElement 这样的 ID，这样你以后就可以很容易地找到它进行克隆.

How I would do this is create the element once in plain html/css, let your designer style it however he wants, then simply add a .hidden class to it. Give it an ID like #rootElement so you can find it easily later for cloning.

在您的 javascript 中，您可以克隆该元素，用数据填充它，然后删除 .hidden 类以使其对用户可见.其余 css 规则仍将适用.

In your javascript, you can clone that element, fill it with data, and remove the .hidden class to make it visible to the user. The rest of your css rules will still apply.

这篇关于使用 Javascript 动态复制 HTML DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！