Product
Introducing Reachability for PHP
Reachability analysis for PHP is now available in experimental, helping teams identify which vulnerabilities are actually exploitable.
By Benjamin Barslev - Apr 24, 2026
Launch Week Day 5: Introducing Reachability for PHP.Learn More →
concat.js 
Chainable DOM Builder
How to use
$C(parentNode, replace, direct)
...
.end();
parentNode is a DOM element to put the result into.
replace is a boolean value indicates that parentNode's content should be
replaced with newly built content (newly built content will be appended to the
current one when replace is coerced to false).
direct indicates that everything should be rendered directly to parentNode
right away (skipping documentFragment creation).
Return value is the result's documentFragment in case parentNode is not
passed. When parentNode is passed, return value is undefined.
Usage example
var tmp = 0;
$C(document.body)
.div({'class': 'ololo', 'style': 'background-color: red; height: 100px;'})
.act(function() {
// In all callbacks _this_ is pointing to the current element
// (it's newly created div here).
this.addEventListener('click', function() { alert(5555); });
})
.ul()
.repeat(2)
.li()
.text('aaa')
.end(4) // end(number) could be used to replace _number_ end() calls.
.repeat(3)
.span({'style': function() { return 'border: 1px solid green;'}})
.text(function(index) {
// _index_ is the repeat() index (from 0 to 2 here).
return index + ' ' + Math.random();
})
.end()
.end()
.repeat(function() { return ++tmp <= 5; })
.p()
.text(function(index) { return index + ' ' + tmp; })
.end()
.end()
.div()
.text('hello')
.text('<br>', true) // It is possible to add unescaped markup fragments.
.text('world')
.end()
.test(1 === 1) // .test() is used for conditional processing.
.elem('section') // Not all elements have shortcut functions like .div()
.text('ololo')
.end()
.end()
.test(function() { return false; })
.text('alala')
.end()
.each([9, 8, 7])
.p()
.text(function(item, index, arr) {
// _index_ is .each() array index, _item_ is the array element.
return index + ' ' + item;
})
.repeat(2)
.div()
.text(function(index) { return index; })
.end()
.end()
.div()
.text(function(item, index, arr) { return index + ' ' + item; })
.end(3)
.choose()
.when(false).text('1111').end()
.when(true).text('2222').end()
.otherwise().text('3333').end()
.end()
.end();
Will append the following to <body> tag:
<div class="ololo" style="background-color: red; height: 100px;">
<ul>
<li>aaa</li>
<li>aaa</li>
</ul>
</div>
<span style="border: 1px solid green;">0 0.3901003133505583</span>
<span style="border: 1px solid green;">1 0.19187432969920337</span>
<span style="border: 1px solid green;">2 0.0640524192713201</span>
<p>0 1</p>
<p>1 2</p>
<p>2 3</p>
<p>3 4</p>
<p>4 5</p>
<div>
hello
<br>
world
</div>
<section>ololo</section>
<p>
0 9
<div>0</div>
<div>1</div>
<div>0 9</div>
</p>
<p>
1 8
<div>0</div>
<div>1</div>
<div>1 8</div>
</p>
<p>
2 7
<div>0</div>
<div>1</div>
<div>2 7</div>
</p>
2222
Define custom actions
You can define custom actions for build process. For example, if you use jQuery, you can define an action for event handlers binding like below:
$C.define('on', function(item, index, arr, args) {
$.fn.on.apply($(this), args);
});
$C(document.body)
.div()
.on('click', function(e) { alert(123); })
.on('mousemove', function(e) { alert(345); })
.text('I am clickable and mousemoveable')
.end(2);
Memorize results
On every step of DOM building, we can memorize nodes and other data. Memorized
items are being put into $C.mem dictionary. $C.mem dictionary is initially
empty, but it is shared between different $C() calls. You may want to reset
this dictionary manually like $C.mem = {}.
$C(document.body)
.div()
.mem('helloDiv')
.text('hello')
.end()
.each([11, 22])
.span()
.mem(function(item, index, arr) {
return 'each' + index;
}, function(item, index, arr) {
return index + ' ' + item + ' ' + this.tagName.toLowerCase();
})
.end()
.end()
.end();
In this example $C.mem will be:
{helloDiv: <div>hello</div>, each0: '0 11 span', each1: '1 22 span'}
Another example (with $C.mem resetting):
$C.mem = {aa: 123, bb: 234};
$C(document.body)
.div()
.mem('aa')
.text('hello')
.end()
.end();
And $C.mem will be:
{aa: <div>hello</div>, bb: 234}
FAQs
Chainable DOM Builder
We found that concat.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 31 Jan 2017
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Introducing Data Exports
Export Socket alert data to your own cloud storage in JSON, CSV, or Parquet, with flexible snapshot or incremental delivery.
By Ola Adekola - Apr 23, 2026
Research
/Security News
Bitwarden CLI Compromised in Ongoing Checkmarx Supply Chain Campaign
Bitwarden CLI 2026.4.0 was compromised in the Checkmarx supply chain campaign after attackers abused a GitHub Action in Bitwarden’s CI/CD pipeline.
By Socket Research Team - Apr 23, 2026